» Joomla

Are Template Clubs Losing The Plot?

Dan Luton — Wed, 19 Jan 2011 16:30:31 +0000

I've long been a fan of the cutting-edge design work produced by many of the top template clubs.

Rich, unique designs are being published every month for keen club members to download and deploy for their own web projects, making it easy to get an amazing looking website up-and-running in relatively little time.

However, what I'm not a fan of is the way many templates are built these days.

A good poke around under the hood is enough to make anyone who works with HTML/PHP/CSS frown at what's going on – yes, the code is normally nicely structured, but what is rendered in the browser needs to be carefully considered before using a commercial theme.

Framework = More Work?

The trend these days is to use a proprietary theme framework – these are produced by the clubs and normally the core is shared under a GPL license. All of the club template releases are built on this framework, which offers a bewildering amount of flexibility in layout and features. Often they come complete with an entire management system which is used to configure how everything works. This management can even stretch beyond the template and start managing core features of the CMS itself.

However, the learning curve tends to be steep, with the frameworks being massively complex in their implementation, and core changes to the code are far more difficult than they would be for a more traditionally constructed theme.

Many aspects of the layout can be adjusted within the theme's setup options, so in a lot of cases, code intervention isn't really needed – but what if you need to break free of the framework for something? You have to commit to learning how everything works within the framework, and often even small adjustments are hugely complex given the more rigid nature of the frameworks (which are normally based on a CSS grid system).

More Features = Less Performance

Ah, HTTP requests. A real hog of performance, and something you want to really keep to a minimum. By using clever techniques such as CSS sprites, JS and CSS combining, you can massively reduce the number of requests thus speeding things up – a win for your users, a win for your host, and a win for the performance of the site.

Now, I understand the requirement to separate elements up in order to give flexibility to a theme – but at what cost? Dozens of individual CSS and Javascript files cannot be a good thing.

Take a nice, lean CMS like WordPress for example. I recently was asked to investigate why the breadcrumb trail wasn't working (turns out the theme's breadcrumbs file was pretty much useless) and was horrified at the source output that I saw. Take a look at these stats:

section (a 'normal' site would be around 20-100 lines) including:

233 lines of code for the section (a ‘normal’ site would be around 20-100 lines) including:
46 lines of embedded CSS
16 separate CSS files
12 separate Javascript files
2 Javascript libraries
Almost 1400 lines of code for the home page

Which all add up to the following:

308 total objects
287 images
300Kb of scripts
A 2,700Kb total page size

Of course, I understand that sites will vary in content, plus there were a couple of extra plug-ins installed in this case – but a quick look at the relevant demo sites paints a pretty similar picture. When you consider that template clubs usually run on some pretty beefy server hardware, they can give a false impression of how the template might perform. Once deployed to a more common shared hosting platform, performance will undoubtedly suffer.

What can we do about it?

Template clubs and their projects are obviously a great way for novice developers and webmasters to get started, but many will be oblivious to what goes on under the surface of a theme, blinded by the fancy design and effects.

It's a shame in some ways, as the popularity of these clubs means that a high percentage of CMS websites will be using them, which could portray the whole platform in a negative light if the performance of a platform is judged on these sites.

My advice: take a look at what's going on under the hood when using a club template, you might be surprised at what you see. All those features aren't really free, and are costing you dearly in terms of performance. Also, to get some real stats on your site, run it through a performance checker like http://websiteoptimization.com/services/analyze/ to see how your own projects perform.

Of course, not all theme providers can be tarred with the same brush – know of a club producing more streamlined templates without all the fluff? Let us know in the comments!

Disabling Google Analytics for front-end Administrators in Joomla

Dan Luton — Fri, 05 Mar 2010 10:26:29 +0000

A good question, raised by Jack Bremer, prompted the writing of this brief post in case it's of use to somebody else at some point (including myself).

The GA plugin in WordPress has this option, which is great for larger sites with loads of front-end admins all working on the site – you don't want to be diluting your Analytics with all that noise.

So, how can the same be acheived in Joomla? Well, quite easily actually. Read on to find out how…

Modify the Template

For this to work we will need to make a simple logic change in the site's template index.php file, which you can find in template/your_template directory of your site. First we'll need to get the $user variable loaded into the template, so, near the top, add the following line of PHP:

$user =& JFactory::getUser();

This will load an array of variables into $user that we can use to determine who's currently logged-on to the front-end of your website. The particular value we're looking for is the User ID, contained in $user->gid (the current user's Group ID) – this value is zero (false) if a guest is browsing the site, but will be a specific figure depending on which group they are assigned to when logged-on.

Add the logic code

Next step is to locate your GA tracking code, which should be right at the bottom of your index.php file, just before the tag. We need to wrap this in some PHP test code to selectively load the tracking script based on the outcome of our condition, so first locate your tracking code which will look like this:

Then add the PHP test to selectively load the scripts, which looks like this:

gid == 25) : ?>

This example above will disable the GA tracking code only for Super Administrators logged-on to the front end. You can add your own test conditions depending on your requirements, by using the list below as a reference for the group to test:

18 – Registered
19 – Author
20 – Editor
21 – Publisher
23 – Manager
24 – Administrator
25 – Super Administrator

Disable tracking for anyone who isn't a guest user (not logged-on):

if (!$user) :

Disable tracking for all back-end users:

if (!$user == 23 || !$user == 24 || !$user == 25) :

Disable tracking for all registered users:

if (!$user == 18) :

I'm sure you get the gist!

Got a better idea or know of a plugin that can do this for you? Please share it in the comments, we'd love to hear your ideas!

Advanced Techniques: The Joomla Parent Menu ItemID

Dan Luton — Wed, 03 Mar 2010 22:50:56 +0000

Joomla's ItemID system offers a great way of customizing sites by giving the opportunity to style major parts of a template or page based on the menu links ItemID.

Every menu link in a Joomla website has one; and they are unique to each and every link on your site.

But what if you need to style entire sections of a site based on a handful of top-level (parent) menu items?

This article explores the methodology of styling sub-level pages respective of their common parent menu links.

Method 1: Modifying the mod_breadcrumb Module Code

The mod_breadcrumb module is native to Joomla, and by it's core function maintains a trail of menu link hierarchy leading to the current page. This code can be utilized in order to obtain the top-level menu's textual name (rather than an itemID number). This method expands the code further to reformat this text into a usable, readable format which can be used to style a page in an understandable way. It's more code-heavy than method 2, but provides an easier-to-understand output that works in exactly the same way.

Let's first examine the original code:

defined('_JEXEC') or die('Restricted access');

class modBreadCrumbsHelper
{
	function getList(&$params)
	{
		global $mainframe;

		// Get the PathWay object from the application
		$pathway =& $mainframe->getPathway();
		$items   = $pathway->getPathWay();

		$count = count($items);
		for ($i = 0; $i < $count; $i ++)
		{
			$items[$i]->name = stripslashes(htmlspecialchars($items[$i]->name));
			$items[$i]->link = JRoute::_($items[$i]->link);
		}

		if ($params->get('showHome', 1))
		{
			$item = new stdClass();
			$item->name = $params->get('homeText', JText::_('Home'));
			$item->link = JURI::base();
			array_unshift($items, $item);
		}

		return $items;
	}

	function setSeparator($custom = null)
	{
		global $mainframe;

		$lang =& JFactory::getLanguage();

		if ($custom == null) {
			if($lang->isRTL()){
				$_separator = JHTML::_('image.site', 'arrow_rtl.png');
			}
			else{
				$_separator = JHTML::_('image.site', 'arrow.png');
			}
		} else {
			$_separator = $custom;
		}
		return $_separator;
	}
}

We can immediately remove the second part of the code that sets the separator, since we don't need that. Also, since we only need to return the parent item's text, we don't need the loop in place. We shall also use the Application Object since
$global mainframe will be removed in Joomla 1.6, so:

$global mainframe;

Becomes:

$app = &JFactory::getApplication();

Which gives us the completed code below:

class getParentMenuTitle {
	function getList() {
		$getParent = &JFactory::getApplication();
		// Get the PathWay object
		$pathway =& $getParent->getPathway();
		$items = $pathway->getPathWay();
	return $items;
	}
}
$list = getParentMenuTitle::getList();
$count = count($list);
if ($count !== 0) :
	$parentmenu = $list[0]->name;
	$parentmenu = ereg_replace(" ", "-", $parentmenu); // replace spaces with a dash
	$parentmenu = ereg_replace("[^+A-Za-z0-9-]", "", $parentmenu); // strip special characters
	$parentmenu = strtolower($parentmenu); //set name to lowercase
else :
	$parentmenu = "home"; // Set parentmenu to "home" if there are no items
endif;

How To Use The Code

This block of code can be inserted directly into your active template's index.php file before the HTML is started. Remember to enclose the code block in PHP tags. Alternatively you can include it from an external file.

Once working in the template, you can apply the variable $parentmenu to a top-level container to initiate a CSS hook. Where you add this will depend on what you need to influence in the design, but the further up the hierarchy the more things you will be able to affect in the design – for example:

…will allow you to influence the design across the whole template, such as:

body#menu-link-name a {color:red;}

…which will change all links on the page to red for that particular top-level menu link.

Method 2: Using the Jsite Object

This method is by far the simplist of the two methods, and unless you need a more human-readable format for the menu class/ids then it's by far the recommended method of the two. It uses the Jsite object to obtain the parent menu's ItemID and stores it in a variable which can then be applied to any class/id in the template:

$parentmenu = JSite::getMenu()->getActive()->tree[0];

You can obtain the ItemID of any menu links in the pathway by altering the value of tree[0].

How To Use The Code

Again, this code needs to be inserted into the template. The ItemID is stored in the $parentmenu variable, just as it was before, so you can use a similar method to above – but prefix the class/id with something or else you may have problems, for example:

Why Would You Need To Use Method 1?

The first method could be useful in instances where you (as the developer) might want to pass more control onto someone who is less technically-minded – the class/id names which are generated using this method are very easy to predict, whereas method 2 requires the administrator to lookup the itemID for each menu item that requires styling.

Something to Share?

Have an alternative technique, or have you used this (or something similar) on a site before? Please do share it in the comments.

Many thanks to Gergő Erdősi and Amy Stephen for the code presented in method 2 above.

Advanced Techniques: Mass Settings Changes In Joomla!

Dan Luton — Wed, 20 Jan 2010 10:21:08 +0000

Ever need to do a bulk settings change to an established site in Joomla? Perhaps you forgot to make the changes as you were building the site?

We recently worked on a development which already had a complex hierarchy of menu links set-up on the system (approx. 200 links), but realised later in the development that the "SSL Enabled" flag in the menu settings needed to be set to the "Off" setting in order to force the majority of the site to run in non-SSL mode:

The obvious solution is to go through each menu item one at a time at set this manually – but there's a risk that some may be missed, and of course, the time it would take to do this to 200+ links would be considerable.

So, instead, we set about using simple find & replace commands, we can run a query directly on the database to do this for us in one step. The query we will be using has this structure:

NOTE: Please ensure you make a full backup of your database before proceeding – if there's a problem, you will easily be able to restore the database and try again.

update TABLE_NAME set FIELD_NAME = replace(FIELD_NAME, 'string to find', 'new string')

Use a program such as PHPMyAdmin to easily make edits to your database. Most hosting providers give easy access to this via your hosting control panel – this will allow you to find the table/field names and run the query easily.

So, in our case, it's fairly obvious we'll find the setting we need to adjust in the jos_menu table, so, browse the table, then click the edit icon to open up the contents of one of the rows:

You'll see I've indicated the bit we need to change on the image above – it's in the field named params. So, we now know the name of the table, and the field that we need to modify. The text to search for (in this case) will be "secure=0" (so, any menu SSL settings that are set to "ignore"), and the setting we need to change to (like on the diagram) is "secure=-1" ("Off). If you're in any doubt as to the setting that's needed, just change it in Joomla and view the string in PHPMyAdmin.

This now allows us to construct the final query that we will run on the database:

update jos_menu set params = replace(params, 'secure=0', 'secure=-1')

Simple, isn't it?

To run the query, simply click the "SQL" tab in PHPMyAdmin, paste your query into the box, and click go. Once it's run successfully, log into the Joomla administrator and check that everything was changed as expected.

Calling all Joomla! Developers…

Dan Luton — Fri, 30 Oct 2009 14:37:16 +0000

The undisputed queen of Joomla, Amy Stephen, has set up a new Ning social community group especially for Joomla! professionals and developers. In just over a month it's amassed over 400 members and is growing rapidly.

"We are an UNOFFICIAL Joomla! Developer and Site Builder Network for collaboration and involvement. This is a professionals network, please use the Joomla! Forums for support."

The site already has the support and involvement from some of the top minds in the Joomlasphere, so is the place to be if you have something to offer or are involved with Joomla development in some way.