{"id":80500,"date":"2017-05-18T04:16:55","date_gmt":"2017-05-18T08:16:55","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=80500"},"modified":"2017-06-27T09:36:18","modified_gmt":"2017-06-27T13:36:18","slug":"multipurpose-website-templates-manage-image-links","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/multipurpose-website-templates-manage-image-links.html","title":{"rendered":"Multipurpose Website Templates. How to manage image links"},"content":{"rendered":"<p>Hello! This video tutorial shows how to <strong>manage image links<\/strong> in Multipurpose HTML templates.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/gUIYYOICmGo\"><\/iframe>\r\n<\/div>\r\n<p>It may happen that you want to add new links to text\/images on your website and remove existing links.<\/p>\r\n<p>Let&#8217;s learn how to do that.<\/p>\r\n<ol>\r\n\t<li>\r\n\t\t<p>Open the corresponding <strong>.html<\/strong> file of the page you are editing with any text editor (Notepad++, Sublime Text 2 etc.):<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_1.png\" alt=\"\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-80502\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_1.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_1-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_1-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_1-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_1-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\t\r\n\t\t<p>Let&#8217;s say, you want to remove link from some item title and add link to the image itself:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_2.png\" alt=\"\" width=\"1247\" height=\"686\" class=\"alignnone size-full wp-image-80503\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_2.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_2-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_2-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_2-768x422.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_2-1024x563.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Use the <strong>CTR+F\/CMND+F<\/strong> key (<strong>Windows OS\/Mac OS<\/strong>) to find the desired section in the file:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_3.png\" alt=\"\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-80504\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_3.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_3-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_3-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_3-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_3-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\t\r\n\t\t<p>As you can see, <strong>H5<\/strong> titles are linked in the code:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_4.png\" alt=\"\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-80505\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_4.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_4-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_4-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_4-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_4-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Remove the <strong>&lt;a&gt;<\/strong> attribute from title code, so it looks as follows:<\/p>\r\n<pre class=\"brush:html\">&lt;h5 class=&quot;text-bold text-primary&quot;&gt;AVA Nob Hill&lt;\/h5&gt;<\/pre>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_5.png\" alt=\"\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-80506\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_5.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_5-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_5-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_5-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_5-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\t\r\n\t\t<p>Now let&#8217;s link the item image to the same URL instead:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_6.png\" alt=\"\" width=\"1286\" height=\"749\" class=\"alignnone size-full wp-image-80507\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_6.png 1286w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_6-150x87.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_6-300x175.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_6-768x447.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_6-1024x596.png 1024w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Look for the <strong>&lt;img&gt;<\/strong> attribute and add the link to it, so it looks as follows:<\/p>\r\n<pre class=\"brush:html\">&lt;a href=&quot;single-property-page.html&quot;&gt;&lt;img src=&quot;images\/home-img-05-370x250.jpg&quot; width=&quot;370&quot; height=&quot;250&quot; alt=&quot;&quot; class=&quot;img-responsive reveal-inline-block&quot;&gt;&lt;\/a&gt;<\/pre>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Save the file and upload it to the server, replacing the original file, to see the changes.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Refresh the page on your website, you can see the first item image is linked now instead of the item title.<\/p>\r\n\t<\/li>\r\n<\/ol>\r\n<p>Now, let&#8217;s say, you would like to have the item image opened in a lightbox, so the larger image is displayed.<\/p>\r\n<p>Let&#8217;s use the second item image as an example.<\/p>\r\n<ol>\r\n\t<li>\r\n\t\t<p>Add the following code to the image attribute of the second item:<\/p>\r\n<pre class=\"brush:html\">&lt;a class=&quot;thumbnail-classic&quot; data-photo-swipe-item=&quot;&quot; data-size=&quot;1170x600&quot; href=&quot;images\/home-img-06-370x250.jpg&quot;&gt;&lt;figure&gt; &lt;\/figure&gt;&lt;\/a&gt;<\/pre>\r\n\t\t<p>Where<strong> thumbnail-classic<\/strong> is a link class, <strong>data-size<\/strong> is an attribute, which defines the size of the larger image opened in a lightbox, and <strong>images\/home-img-06-370&#215;250.jpg<\/strong> is the path to the image, which should be opened in a lightbox.<\/p>\r\n\t\t<p>You may use your custom CSS classes to have the lightbox style matching your desire.<\/p>\r\n\t\t<p>The code should look as follows:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_7.png\" alt=\"\" width=\"1249\" height=\"698\" class=\"alignnone size-full wp-image-80508\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_7.png 1249w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_7-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_7-300x168.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_7-768x429.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_7-1024x572.png 1024w\" sizes=\"(max-width: 1249px) 100vw, 1249px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Do not forget to upload the edited file to the server to apply changes to the website.<\/p>\r\n\t<\/li>\r\n\t<p>You can see the second item image is opened in a lightbox now.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_8.png\" alt=\"\" width=\"1247\" height=\"686\" class=\"alignnone size-full wp-image-80509\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_8.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_8-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_8-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_8-768x422.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/05\/website_how_to_manage_links_multipurpose_templates_8-1024x563.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\r\n\r\n<\/ol>\r\n<p>This is the end of the tutorial. Now you know how to <strong>manage image links<\/strong> in Multipurpose HTML templates.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=gUIYYOICmGo?width=1280&amp;height=720\" rel=\"prettyPhoto\">Multipurpose Website Templates. How to manage image links<\/a>","protected":false},"excerpt":{"rendered":"<p>Hello! This video tutorial shows how to <strong>manage image links<\/strong> in Multipurpose HTML templates.<\/p>\n","protected":false},"author":68,"featured_media":80510,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[537,521,2568],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80500"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=80500"}],"version-history":[{"count":8,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80500\/revisions"}],"predecessor-version":[{"id":81689,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80500\/revisions\/81689"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/80510"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=80500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=80500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=80500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}