Joomla 3 Module with selectable template output

I’ve been working on a Joomla based website the past few weeks, and getting my head around the world according to Joomla 3.  I’ve been using modules for various parts of the web pages, and today I wanted to have a module adjust is output based on a configuration setting.

In the Joomla backend, you create a ‘module’ instance that acts as a conduit for the actual module code.  You specify where and when that instance will appear on the user pages. There are quite a lot of parameters you can specify, but I needed to be able to switch how the module renders its content.

To do this I added an entry to the modules XML file in the <config> section:


This added an entry ‘Layout’ in the Advanced tab for my module instance in module manager.

I also duplicated the default.php file in my module tmpl folder, and named it alt-view.php for now.  With that done, going to the advanced tab in module manager for my module, I could select either default or alt-view as the layout.

In order for the module to use the right template, I needed to modify the main module code.  My module is called cfviewposts, so mod_cfviewposts.php contains the main entry point for the module.

The last line of the PHP code loads the template and then execution rolls into it.  I changed it to the following line

require JModuleHelper::getLayoutPath('mod_cfviewposts',$params->get("layout","default"));

This pulls the ‘layout’ param from the module parameters, and if it’s not present, defaults to ‘default’ which will load default.php from mod_cfviewposts/tmpl.

So now I can create a 2nd instance of my module, and using the newly minted advanced configuration option, select the alternate output when that module is displayed.

PHP and string addition

One of the problems of working on a website, is you’re constantly switching between Javascript and PHP.  Nothing worse than trying to track down an error to discover you’ve concatenated two strings in PHP thinking it was javascript…

$string1 + $string2 <> $string1 .  $string2

You’d think the $ in front of the variable names would have been a clue…


Resize an animated gif using imagemagik

This is a nice easy one liner:

convert original.gif -coalesce -repage 300x175+0-25 -layers optimize resized.gif

-coalesce expands the image into a series of frames while -repage will re-compress them into one image again. No need for temp files or cleanup!  The 300×175 specifies the new size for the image, while +0-25 specifies where to pull the segment of the canvas from in the old image.  My goal here was to extract x 300×175 animated gif from a 400×230 original.

Update: I also needed to pad the image with more pixels to the left & right, so it would have a particular aspect ratio, and fill the added pixels with a specific color.  To get the color from the top left pixel from the original image I used this:

convert 'original.gif[0]' -colorspace rgb -crop 1x1+0+0 text:

Then, used this to pad the image I’d resized previously:

convert reiszed.gif -coalesce -repage 0 -colorspace rgb -background "#1541BA" -extent 700x175-200+0 padded.gif

This resulted in a 700×175 animated GIF, which is the correct aspect I was going for.  Then this command to resize it to 800×200, which I needed to match the required spec:

convert padded.gif -coalesce -repage 0 -resize 800x200 800x200.gif


Removing empty entries in a PHP array

I’m working on some PHP code right now, and I need to split a URI path and recombine it with some changes.  However, I ran into an issue using explode.  This is what I had:

$parts = explode('/',$path);

This worked as expected, unless the URI ended with a ‘/’, in which case I ended up with an empty string as the last item.  Also, if it started with a ‘/’ then I’d get an empty string at the start.  I decided to fix this using array_filter with the default predicate, like so:

$parts = array_filter(explode('/',$path));

Job done, right? Nope! Turns out array_filter doesn’t reindex anything, so my array ended up with no [0] entry, and $parts[count($parts)-1] didn’t return the last entry anymore.  I needed to rebuild the array with new indexes.  Solved it by using array_values like so:

$parts = array_values(array_filter(explode('/',$path)));

If it was mission critical, maybe it would be more efficient to create an iterator that loops over the exploded array and appends any non-zero length strings to a new array, but I’ll save that for another day.

JavaScript page refresh timer

I wanted a web page I’ve been working on to auto-refresh, but not just after a certain time has elapsed, but when the clock is just past a quarter hour interval (i.e. x:15, x:30, x:45, x:00).

It’s pretty straightforward, but as I was searching around, it seems to be a pretty common question, so figured I’d put up my own answer here:

 function setAutoRefresh()
   var interval = 15*60*1000; //every 15 mins...
   var timeNow = new Date().getTime();
   var nextInterval = (Math.floor(timeNow/interval)+1) * interval + 10000; //next time interval, plus 10 seconds...
   var nextIntDate = new Date();
   console.log("Next timeout tick: " + nextIntDate.toLocaleTimeString());
   autoRefreshTimer = setTimeout(function(){
   console.log("Auto-refresh: " + new Date().toLocaleTimeString());
   },nextInterval - new Date().getTime());

So we round up the current time in ms to the next 15 min interval, and add 10,000 so our event triggers 10 seconds after the interval (I have another process that ticks every 5 mins and updates the DB table this web page pulls from, so I wanted to make sure I got the latest data).

The var autoRefreshTimer is global and can be used to cancel the timeout timer when the page becomes hidden.

The var nextIntDate is only used for the console log, and can be removed if you don’t need that.

The function reloadPage resends all my ajax calls to reload the different data on the web page and then calls setAutoRefresh when it’s all done.

Hope that all makes sense.