Joomla columns

I’m currently migrating the NESYFC website’s content management system from the now-very-out-of-date Joomla 1.5 to 2.5, with the aim of going for 3.x soon enough. (actually, once the hosts upgrade their PHP version to the one needed for 3.x)

So far it’s been going smoothly enough, with a few small wrinkles. I used SPUpgrade to migrate the main site itself. The excellent JEvents is used for the site’s diary and events sections and after a little fiddling with database permissions that migrated fine too, using the upgrade script they provide. There are still a few things: a couple of smaller extensions still need moved over, and I’m taking the opportunity to investigate some improvements. A big one would be the ability to automatically generate menus: unlike WordPress for example, when you create an article you also need to manually create a menu item that links to it. This is fiddly for non-technical users so I’d like it to happen unassisted: there seem to be some extensions that do it so I’ll report on which one I settled on later.

One of the changes I had to make was upgrading the template. Mostly this involved some minor tweaks, largely achieved by following this – but one thing that annoyed me was that the nice column layout wasn’t so nice in 2.5. Since Joomla 1.6, layout has moved from html tables to css. This in itself is a Good Thing, but in the process the Joomla devs decided that the column layout like the one the NESYFC site uses on its front page should be a grid, rather than two columns. This meant that the articles, which are different lengths, had lots of white space gaps between them so their titles could line up. I’ve needed to make some changes to how the front page is generated, which I’ll share now. This uses a template override to replace the core Joomla PHP (very nice feature), and is largely based on the discussion here. The idea is to move from laying the articles out row by row (with each row wrapped in a <div>) to laying them out in columns (each column wrapped in a <div>). Mostly, things like this should be done using CSS and the Joomla admin layout controls, but this seems to only be fixable using some new PHP code!

I created, in the folder templates/TEMPLATENAME/html/com_content/featured a file called default.php. This was initially just a copy of the default.php from Joomla’s core under components/com_content/views/featured/tmpl/ – the “featured” component generates the front page and the overall layout is controlled by default.php. (By the way, the layout of individual items is controlled by default_item.php which I’ve also tweaked slightly).

This was then amended from the line

<?php if (!empty($this->intro_items)) {

to the end of that if block, replacing the code with the following:

<?php
if (!empty($this->intro_items)) {
  // first row
  $columns = array();
  for ($i = 0; $i < $this->columns; $i++) {
    $columns[$i] = "<div class=\"cols-".($this->columns)." column-".($i+1)."\"".($item->state == 0 ? ' system-unpublished"' : null).">";
  }

  foreach ($this->intro_items as $key => &$item) {
    $key= ($key-$leadingcount)+1;
    $rowcount=( ((int)$key-1) % (int) $this->columns) +1;
    $row = $counter / $this->columns ;
    $colindex = $rowcount - 1;

    $this->item = &$item;
    $columns[$colindex] .= "<div class=\"items-row cols-1 row-".$row."\">";
    $columns[$colindex] .= $this->loadTemplate('item');
    $columns[$colindex] .= "</div>";
    $counter++;
  }

  for ($i = 0; $i < $this->columns; $i++) {
    $columns[$i] .= "</div>"; // end of column
    echo ($columns[$i]);
  }
}
?>

Make sure that your template’s CSS includes the following:

.cols-1
{
display: block;
float: none !important;
margin: 0 !important;
}

.cols-2.column-1
{
width:46%;
float:left;
}

.cols-2.column-2
{
width:46%;
float:right;
margin:0
}

/*repeat the above for three columns with width:29% if you want a three column layout!*/

.items-row
{
overflow:hidden;
margin-bottom:10px !important;
}

A few comments…

First, I’ve gone for a big block of PHP rather than HTML with PHP elements embedded in it as is the usual style with views. This isn’t quite as neat but I found it easier to debug that way.

My code style is to use braces {} on code blocks rather than the if…endif style. Apparently PHP sometimes breaks if you mix these within a block (e.g. if… for {…} … endif ), and this caught me out for a while. Simple lesson: be consistent with these.

Chromium’s “inspect element” feature was invaluable in sorting this out. Tracking which elements affected which part of the layout, and what CSS they were picking up, would be near impossible without such a thing.

I suspect more tweaking is still needed yet (and my now quite rusty CSS knowledge has probably led to some howlers above) but it’s now looking much closer to what I’d like. Hooray!