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; | |
} | |
} | |
} | |
} |