05 Jan 2017

Joomla com_content layout overrides

In the following example I will be doing an override to the Category blog layout. If you want to do overrides to the article layouts use the same method but make modifications as required.

The layout changes that I'm going to make are changes to the article feature image and article heading

  1. Move the files from components/com_content/views/category/tmpl into templates/<your_template>/html/com_content/category
  2. rename the name of each file with a unique identifying name. For instance, my new layout is called etsy, so I have renamed the file blog_item.php to etsy_item.php
  3. In the Joomla backend, navigate to the category and assign your new alternative layout. Once this is done, the category should now be successfully using the new layout.

    changing layouts
  4. Let's make some changes to the article heading. Joomla uses a series of building blocks for each part of the layout. You can find them in the layouts directory. For instance, the file generating the article heading can be found in layouts/joomla/content/blog_style_default_item_title.php - Copy this file into your own templates html directory templates/<your_template>/html/layouts
  5. Open up the file generating the article layout from your html directory. Mine can be found in templates/<your_template>/html/com_content/category/etsy_item
  6. Find the line that generates the heading:

    <?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>

    Notice how the path name (after the word render) is typed using a series of dots rather than slashes to indicate each directory that the file can be found in.
  7. Modify this line to call up your new layout override. In my case the line becomes the following:

    <?php echo JLayoutHelper::render('blog_style_default_item_title_etsy', $this->item); ?>


    Notice that I have removed the path (after the word render) so that it no longer looks for this file within Joomlas core files. Now it will go straight to my new layout stored in the templates html/layouts directory
  8. Make any modifications to the new layout file as needed. Remember my one is found in templates/<your_template>/html/layouts/blog_style_default_item_title_etsy.php