Creating a Joomla Plugin for Specific Modules

In an effort to improve website performance, I have subscribed to the notions of writing vanilla Javascript where possible and to migrate some of the behavior Javascript can handle back to the server.

With that in mind, I had the challenge of moving some needlessly complex image handling originally written in jQuery to a Joomla plug-in.

However, the management of the images was handled within Custom HTML modules. The plug-in would not be applied to article content — it must be applied to module content.

Context. Context. Context.

Joomla’s built-in content events provide a context parameter and is well documented. In addition, you can check against any module parameter to further refine when the plug-in gets executed.

class PlgContentContentSpan extends JPlugin
{
/**
* Plugin that converts:
* <p>
* <img src="/images/EDPS-ABOVE-CONTENT-optimized.jpg" alt="" width="689" height="327">
* <img src="/images/JW-ABOVE-CONTENT-optimized.jpg" alt="" width="315" height="327">
* </p>
*
* To:
* <span id="contentspan" style="background-image: url(/images/EDPS-ABOVE-CONTENT-optimized.jpg), url(/images/JW-ABOVE-CONTENT-optimized.jpg);"></span>
*/
public function onContentPrepare($context, &$row, &$params, $page = 0)
{
// if the module is custom HTML
if ($context == 'mod_custom.content') {
// make sure the custom HTML is the _contentimages module
$module = JModuleHelper::getModule('mod_custom');
$modparams = new JRegistry($module->params);
if ($modparams['moduleclass_sfx'] == '_contentimages') {
// get the HTML
$html = $row->text;
// get the image sources
$dom = new DOMDocument();
$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$imgs = $xpath->query('//img');
// make the image paths absolute for the background-image url
$img1 = '/' . $imgs->item(0)->getAttribute('src');
$img2 = '/' . $imgs->item(1)->getAttribute('src');
// format the HTML
$stdStyle = 'url(' . $img1 . '), url(' . $img2 . ');';
$pieStyle = 'url(' . $img1 . ') top left no-repeat, url(' . $img2 . ') top right no-repeat;';
$contentspan = '<span id="contentspan" style="background-image: ' . $stdStyle . ' -pie-background: ' . $pieStyle . '"></span>';
// return the new HTML
$row->text = $contentspan;
return true;
}
}
}
}