View source for Show Blog Layouts in Table Format

The default Joomla! layouts for menu items which use the Section Blog Layout or the Category Blog Layout has been [http://forum.joomla.org/viewtopic.php?f=428&t=304719 a source of some confusion.]. The problem is that the default layout, when using more than one column, orders the items in a manner that seems very strange. An example how Joomla! orders by default for these layouts can be seen below.

[[Image:Standard-joomla-blog-layout.jpg]]

As you can see, instead of ordering from left to right in row of equal height, the standard layout orders from top to bottom and then from left to right. This has the unwanted result that columns are sometimes empty, but more importantly, the layout does not account for actual rows.


== The Table Blog layout ==

Joomla! 1.5 has the fantastic ability to change any layout using template overrides. In this case we want to create a new template for the Section and Category Blog layouts, using left-to-right ordering of articles as well as table rows of equal height. The end result will look something like this.

[[Image:table-blog-layout.jpg]]

As you can see, ordering occurs in a manner that makes more sense, and rows have the height of the longest item, making them rows of equal height.


== Creating the Table Blog Layout ==

Creating a new table layout is very simple. 

# First, we have to locate the templates responsible for rendering the standard layouts. You find these under /components/'''com_content'''/views/'''section'''/tmpl/'''blog.php''' and /components/'''com_content'''/views/'''category'''/tmpl/'''blog.php'''. 
# Now we need to add a folder to our template to make the actual overrides. 
## Add a '''html''' folder to your template
## Add the folder name of the component from which you would like to override a layout. In this case that would be '''com_content'''.
## Add a folder with the name of the view from which you want to override a layout. In this case that would be '''section''' and / or '''category'''.
## Finally add a copy of the layout file you wish to override. In this case '''blog.php''' from the section and / or the category layout.
## The new directory in your template directory should look something like this: /html/com_content/section/blog.php.
# Now, for the good part. We are going to replace several lines in the copied blog.php files with some new lines. Open the file in an editor and replace lines 45 through 66 with the following: 
<source lang='php'><tr>
   <td valign="top">
	  <table width="100%"  cellpadding="0" cellspacing="0">
		 <?php for( $z = 0, $c = ceil( $this->params->get('num_intro_articles', 4) / $this->params->get('num_columns') ); $z < $c; $z++ ) : ?>
			<tr>
			   <?php $z == 0 ? $loop = 0 : $loop = $z * $this->params->get('num_columns'); ?>
			   <?php for( $y = $loop; $y < ( $loop + $this->params->get('num_columns') ); $y++ ) : ?>
				  <?php if ($y > $loop) : $divider = " column_separator"; endif; ?>
				  <td valign="top" width="<?php echo intval(100 / $this->params->get('num_columns')) ?>%" class="article_column<?php echo $divider ?>">
					 <?php
					 if ($y < $this->total && $y < ($numIntroArticles)) :
						$this->item =& $this->getItem($y, $this->params);
						echo $this->loadTemplate('item');
					 endif;
					 ?>
				  </td>
			   <?php endfor; ?>
			</tr>
		 <?php endfor; ?>
	  </table>
   </td>
</tr>
<?php $i = $i + $this->params->get('num_intro_articles') ; ?></source>

Save the files. Voìla, you have now created template overrides! The new layouts order the items from left to right when multiple columns are present, as well as creating rows of equal height.

For more information about this layout you can check out [http://forum.joomla.org/viewtopic.php?f=428&t=304719 this post] on the Joomla! forum.

[[Category:Tips and tricks]]
[[Category:Tips and tricks 1.5]]