{"id":238,"date":"2014-03-21T15:36:57","date_gmt":"2014-03-21T13:36:57","guid":{"rendered":"http:\/\/mednis.info\/wp\/?p=238"},"modified":"2014-03-21T15:45:29","modified_gmt":"2014-03-21T13:45:29","slug":"place-intro-image-before-article-title-in-joomla-3","status":"publish","type":"post","link":"http:\/\/mednis.info\/wp\/?p=238","title":{"rendered":"Place intro image before article title in Joomla! 3"},"content":{"rendered":"<p>By default it is not possible to swap article title and intro image nor rearrange other article properties.<\/p>\n<p>The solution for this problem is called a <strong>template override<\/strong>. The idea is to make copies of certain Joomla! core files, modify them (rearrange code blocks) and save them in specific places.<\/p>\n<figure id=\"attachment_241\" aria-describedby=\"caption-attachment-241\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"size-full wp-image-241\" alt=\"Standard layout -- Article title, then intro image\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_standard_layout.jpg\" width=\"300\" height=\"284\" \/><figcaption id=\"caption-attachment-241\" class=\"wp-caption-text\">Standard layout &#8212; Article title, then intro image<\/figcaption><\/figure>\n<figure id=\"attachment_240\" aria-describedby=\"caption-attachment-240\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"size-full wp-image-240\" alt=\"Layout with template override -- intro image, then article title\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_with_template_override.jpg\" width=\"300\" height=\"291\" \/><figcaption id=\"caption-attachment-240\" class=\"wp-caption-text\">Layout with template override &#8212; intro image, then article title<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p>In this tutorial I will show how to place intro image before article title for featured articles (usually the front page). I will do this in Joomla! 3.2<\/p>\n<p>Using FTP locate the file \/components\/com_content\/views\/featured\/tmpl\/default.php and copy it to your computer.<br \/>\n<figure id=\"attachment_246\" aria-describedby=\"caption-attachment-246\" style=\"width: 517px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"size-full wp-image-246\" alt=\"Locate file \/components\/com_content\/views\/featured\/tmpl\/default_item.php\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/ftp_file_manager.jpg\" width=\"517\" height=\"742\" srcset=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/ftp_file_manager.jpg 517w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/ftp_file_manager-209x300.jpg 209w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><figcaption id=\"caption-attachment-246\" class=\"wp-caption-text\">Locate file \/components\/com_content\/views\/featured\/tmpl\/default.php<\/figcaption><\/figure><\/p>\n<p>Open it with your favorite code editor and using <em>Find<\/em> look for the text &#8220;image_intro&#8221;. In my case it was around the line 139.<br \/>\n<figure id=\"attachment_254\" aria-describedby=\"caption-attachment-254\" style=\"width: 1218px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_original_position.jpg\"><img loading=\"lazy\" class=\"size-full wp-image-254\" alt=\"Look for the text\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_original_position.jpg\" width=\"1218\" height=\"968\" srcset=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_original_position.jpg 1218w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_original_position-300x238.jpg 300w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_original_position-1024x813.jpg 1024w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_original_position-1000x794.jpg 1000w\" sizes=\"(max-width: 1218px) 100vw, 1218px\" \/><\/a><figcaption id=\"caption-attachment-254\" class=\"wp-caption-text\">Look for the text image_intro<\/figcaption><\/figure><\/p>\n<p>Select and Cut this code block and place it before the title. In my case I had to paste that block before line 25. See the image.<br \/>\n<figure id=\"attachment_253\" aria-describedby=\"caption-attachment-253\" style=\"width: 1218px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_new_position.jpg\"><img loading=\"lazy\" class=\"size-full wp-image-253\" alt=\"Look for the line containing...\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_new_position.jpg\" width=\"1218\" height=\"968\" srcset=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_new_position.jpg 1218w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_new_position-300x238.jpg 300w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_new_position-1024x813.jpg 1024w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/sublimetext_intro_image_new_position-1000x794.jpg 1000w\" sizes=\"(max-width: 1218px) 100vw, 1218px\" \/><\/a><figcaption id=\"caption-attachment-253\" class=\"wp-caption-text\">Look for the line containing show_title. Paste intro image code bofore that line.<\/figcaption><\/figure><\/p>\n<h3>Applying the template override<\/h3>\n<p>Starting with Joomla! 3 there is <a href=\"http:\/\/docs.joomla.org\/J3.2:How_to_use_the_Template_Manager#Creating_Overrides\" title=\"More about template overrides\" target=\"_blank\">no need to manually create specific folders and files<\/a>. In Joomla! admin panel go to Extensions &#8212; Template Manager and switch from Styles to Templates (See the image)<br \/>\n<figure id=\"attachment_251\" aria-describedby=\"caption-attachment-251\" style=\"width: 1135px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_styles.jpg\"><img loading=\"lazy\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_styles.jpg\" alt=\"Extensions -- Template Manager and switch from Styles to Templates\" width=\"1135\" height=\"921\" class=\"size-full wp-image-251\" srcset=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_styles.jpg 1135w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_styles-300x243.jpg 300w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_styles-1024x830.jpg 1024w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_styles-1000x811.jpg 1000w\" sizes=\"(max-width: 1135px) 100vw, 1135px\" \/><\/a><figcaption id=\"caption-attachment-251\" class=\"wp-caption-text\">Switch from Styles to Templates<\/figcaption><\/figure><\/p>\n<p>Find the template you are currently using in your site and click the link &#8220;Details and Files&#8221;. Then swicth to &#8220;Creare overrides&#8221; tab, locate Components\/com_content and click on &#8220;featured&#8221; (see the image). After you click, a green message should appear stating that the override is successfully created.<\/p>\n<figure id=\"attachment_249\" aria-describedby=\"caption-attachment-249\" style=\"width: 1135px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_create_override2.jpg\"><img loading=\"lazy\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_create_override2.jpg\" alt=\"locate Components\/com_content and click on featured\" width=\"1135\" height=\"921\" class=\"size-full wp-image-249\" srcset=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_create_override2.jpg 1135w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_create_override2-300x243.jpg 300w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_create_override2-1024x830.jpg 1024w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_create_override2-1000x811.jpg 1000w\" sizes=\"(max-width: 1135px) 100vw, 1135px\" \/><\/a><figcaption id=\"caption-attachment-249\" class=\"wp-caption-text\">Locate Components\/com_content and click on &#8220;featured&#8221;<\/figcaption><\/figure>\n<p>At this point an empty override has been created. The next task is to replace that empty override with our code that we prepared minutes ago. Using Joomla! build-in code editor (see the image) locate the file &#8220;\/html\/com_content\/featured\/default_item.php&#8221;. This file should contain around 20 lines of code. Replace that code with the one you prepared with rearranged intro image.<br \/>\n<figure id=\"attachment_247\" aria-describedby=\"caption-attachment-247\" style=\"width: 1135px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_apply_new_override.jpg\"><img loading=\"lazy\" src=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_apply_new_override.jpg\" alt=\"Replace that code with the one you prepared (with repositioned intro image).\" width=\"1135\" height=\"921\" class=\"size-full wp-image-247\" srcset=\"http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_apply_new_override.jpg 1135w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_apply_new_override-300x243.jpg 300w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_apply_new_override-1024x830.jpg 1024w, http:\/\/mednis.info\/wp\/wp-content\/uploads\/2014\/03\/joomla_apply_new_override-1000x811.jpg 1000w\" sizes=\"(max-width: 1135px) 100vw, 1135px\" \/><\/a><figcaption id=\"caption-attachment-247\" class=\"wp-caption-text\">Replace that code with the one you prepared (with repositioned intro image code).<\/figcaption><\/figure><\/p>\n<p>Once you save the file the template override should be already functioning. Similarly the output of components and modules can be overridden. The key phrase to search for is &#8220;template\/module\/component override&#8221;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>By default it is not possible to swap article title and intro image nor rearrange other article properties. The solution for this problem is called a template override. The idea is to make copies of certain Joomla! core files, modify them (rearrange code blocks) and save them in specific places.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,25],"tags":[27,26],"_links":{"self":[{"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/posts\/238"}],"collection":[{"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=238"}],"version-history":[{"count":19,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/posts\/238\/revisions"}],"predecessor-version":[{"id":268,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=\/wp\/v2\/posts\/238\/revisions\/268"}],"wp:attachment":[{"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=238"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mednis.info\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}