Template overrides - single article

This is an article about template overrides and specificly to modify the layout of a single article.

Step 1. Create a template override

Go to Extensions > Template manager > Templates. Scroll down and click on “Yourtemplatename Details and Files”. 

Now click through to find the article layout files:

• Create overrides
• Components
• com_content
• article

After you click on the article layout files, Joomla will automatically create a copy of the files that you can use as overrides. The new files will be located at /templates/yourtemplate/html/com_content/article/. 

Inside that folder, we have two more steps to take:

• Delete the default.xml file
• Rename the two PHP files to “Yourtemplatename.php” and “Yourtemplatename_links.php”

The Template Manager is a wonderfully easy to way to create override files, but it does have limitations. For example, it doesn't work well when your current template already has a template override for single articles. In that situation, it's necessary to manually copy the files:

• Copy default.php and default_links.php from /components/com_content/views/article/tmpl/
• Paste those files with new names: Yourtemplatename.php and Yourtemplatename_links.php respectively into /templates/yourtemplate/html/com_content/article/

Step 2. Customize the new layout

Open the file Yourtemplatename.php in a code editor like Notepad++ (windows) or BBEdit (mac)

In this example we will use columns to display the image on the left and the full text on the right. Change the code from line 173 to 187:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> <img
<?php if ($images->image_fulltext_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_fulltext_caption) . '"';
endif; ?>
src="/<?php echo htmlspecialchars($images->image_fulltext); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>"/> </div>
<?php endif; ?>
<?php
if (!empty($this->item->pagination) && $this->item->pagination && !$this->item->paginationposition && !$this->item->paginationrelative):
echo $this->item->pagination;
endif;
?>
<?php if (isset ($this->item->toc)) :
echo $this->item->toc;
endif; ?>
<?php echo $this->item->text; ?>

We're going to wrap the image and fulltext into two columns by using the bootstrap classes row-fluid and span6. This is how the code should look after that update:

<div class="row-fluid">
<div class="span6">
<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> <img
<?php if ($images->image_fulltext_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_fulltext_caption) . '"';
endif; ?>
src="/<?php echo htmlspecialchars($images->image_fulltext); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>"/> </div>
</div>
<div class="span6">
<?php echo $this->item->text; ?>
</div>
</div>
<?php endif; ?>
<?php
if (!empty($this->item->pagination) && $this->item->pagination && !$this->item->paginationposition && !$this->item->paginationrelative):
echo $this->item->pagination;
endif;
?>
<?php if (isset ($this->item->toc)) :
echo $this->item->toc;
endif; ?>

Step 3. Enable the new layout

This layout will work when you choose it in the article settings:

• Go to Content > Article manager > Your article
• Go to Options tab > Alternative layout: Yourtemplatename
• Click Save & close

Open your article in the frontend to see your new layout.

This original tutorial can be found on: https://www.ostraining.com/blog/joomla/template-overrides-articles/