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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } | |
| } | |
| } |