Tuesday, 03 August 2010 16:46

Joomla + K2 = Awesome

Written by

It's no secret I love K2, the content construction kit for Joomla.

While Joomla's core article system is reasonably robust and the introduction of template overrides made it possible to more easily theme elements of Joomla that were previously untouchable, K2 takes both theming and editing to the next level.

Designers have much greater control of each 'view' of content presentation and editors have less to worry about when publishing articles.

It's a win-win situation for aesthetics and usability.

Here's why I love K2:

Multiple template overrides

Joomla's templating system is for the most part very easy: create a folder in the templates directory, design an index.php file similarly to standard static web design practice, insert the Joomla code for component and module placement and that's pretty much it.

That said, prior to Joomla 1.5 we've had to make do with only a limited ability to style the output of Joomla components and modules, relying almost exclusively on CSS with no access to the underlying HTML.

As of J1.5, template overrides were made available, allowing designers to 'override' the core HTML with their own modifications. This helped greatly in letting designers move away from 'that Joomla look' and injected some much-needed flexibility into the templating capabilities of Joomla.

That said, it's only easy to have one template override per component, effectively limiting the designer to one look and feel for content presentation.

This is where K2 absolutely trounces the core Joomla template system.

It's possible to create multiple folders within the K2 template override, each of them containing an entirely different layout. Those templates can then be applied on a per-category basis to give each category a different look and feel.

You can see how I've used that capability on this site to have an entirely different look and feel for the Blog and Portfolio sections.

Clear code structure

The code structure of K2 templates is very clear and very little is left to use-cases. By which I mean that the system won't differentiate between whether an article has a readmore inserted or not. If you turn off the 'readmore link' in the article parameters, then it won't display. If you have it on, it will display - even if there's only intro text.

While that might seem like a counterintuitive feature, I love it. The code is extremely clear and well commented and I don't need to worry about screwing up any complex logic. If I want to permanently remove an entire feature so that it can never be turned on, I just remove that code block.

This code structure makes it a simple matter to understand how each of the elements are laid out and I can modify the layout accordingly. 

If I had one criticism of the K2 template, it's that there are a large number of unnecessary extra divs, mostly used to clear floats.

Easily implemented add-ons

An additional benefit of the clear code presentation is that it's a simple matter to include add-ons directly into the template.

This also ties into the ability to use different templates on each category - add-ons can be tied to a template which is only presented with the appropriate category.

Examples that I've used on this site include social sharing plugins from AddThis and Disqus commenting integration. Sharing should appear on both the blog and the portfolio, but comments are only appropriate for the blog.

In both cases, the service providers generate standard HTML/CSS and Javascript that can be pasted into the site - often with only minor adjustments to handle dynamic article links and titles.

I vastly prefer this method over the Joomla plugin system for these types of applications. Most Joomla commenting plugins make it extremely difficult to reliably and consistently place the comments area and comment counter link. 

Defineable image sizes and additional fields

Onto the administration options, there are two features of K2 that make publishing a breeze.

The second tab in the K2 UI is named simply 'Image'. It allows the author to upload an image, assign a caption and provide a source credit. This image is then inserted into the article, based on the following factors:

  • Placement of the ItemImage variable within the template
  • Global, category and item level parameters for image size

It's possible to globally set a range of 5 image sizes, xsmall to xlarge in the global parameters, category parameters and item parameters. The global parameters also set the specific dimensions for each size.

When an image is uploaded, it's automatically resized based on the size settings for the view.

And because the image is placed according to the layout, the alignment, margins, borders and other styles can be set within the template.

Why is this great? Because authors don't have to think about image placement. They just write the article, upload an image and the template and parameters take care of the rest.

Additional fields are a little clunkier, but still fantastic for creating a repeatable format for additional data. As in our portfolio, where we display the client, their URL (if a website) and the technologies used, it makes it a breeze for authors to simply fill out required information as a standard part of writing an article.


K2 offers a powerful combination of usability for authors and flexible styling for designers. There's a plethora of other features: video integration, tagging, author pages, related items and attachements to name a few. Modules are also just as themable as the component.

This is what core Joomla should be like. 

Fortunately, we have K2.

This email address is being protected from spambots. You need JavaScript enabled to view it.