Add CSS class to all images in Joomla articles using PHP

Question

I have installed a plugin called Nice Watermark (on my Joomla 3 site) that adds a watermark to all images with a certain class (in my case <img class="waterm" src="/images/wm/idx-homepage3cfotoby0.jpg" alt=""> )

Is it possible to use PHP to add a CSS class to all images before the site is loaded? Or even better, to target only images that are part of an article (I don't want to watermark icons and other template images)?

I was thinking something like a plugin that finds <img src=.../> tags in the code and adds a class, but I'm not sure how to attack this problem.

Maybe someone can point me in the right direction?

EDIT:

I've created a Joomla plugin with the following code, and it works, but it also adds a complete html structure (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html><body><p><img... around the images. How can I avoid this?

<?php
// no direct access
defined('_JEXEC') or die;
jimport('joomla.plugin.plugin');
class plgContentAddImageClass extends JPlugin
{
    public function __construct(&$subject, $params)
    {
        parent::__construct($subject, $params);
    }
    public function onContentPrepare($context, &$article, &$params, $offset = 0)
    {
        $content =& $article->text; // Article content
        $dom = new DOMDocument();
        @$dom->loadHTML($content);
        $dom->preserveWhiteSpace = false;
        $images                  = $dom->getElementsByTagName('img');
        foreach($images as $image) {
            // the existing classes already on the images
            $existing_classes   = $image->getAttribute('class');
            // the class we're adding
            $new_class          = ' watermark';
            // the existing classes plus the new class
            $class_names_to_add = $existing_classes . $new_class;
            $image->setAttribute('class', $class_names_to_add);
        }
        $content = $dom->saveHTML();
        return true;
    }
}
?>

Yes it is possible. Have you tried to implement something and are running into problems? can you show your code? — Mike Brant
I found a code that seems to do what I'm after in another question, but I'm not sure how to implement it in a Joomla plugin. — johanpw
You need to build a 'Content' plugin, which, when rendering the article would find all <img> tags and add class to them. It's not a very difficult task — di3sel

johanpw johanpw · Accepted Answer · 2014-06-19T14:19:40

According to the PHP Manual, the saveHTML() method automatically adds <html>, <body> and <!doctype> tags to the output, but I found a code snippet on the same page that removes these codes. Here's the complete code that worked for me:

<?php
// no direct access
defined('_JEXEC') or die;
jimport('joomla.plugin.plugin');
class plgContentAddImageClass extends JPlugin
{
    public function __construct(&$subject, $params)
    {
        parent::__construct($subject, $params);
    }
    public function onContentPrepare($context, &$article, &$params, $offset = 0)
    {
        // Article Content
        $content = &$article->text;
        $dom = new DOMDocument();
        @$dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
        $dom->preserveWhiteSpace = false;
        $images                  = $dom->getElementsByTagName('img');
        foreach($images as $image) {
            $existing_classes   = $image->getAttribute('class');
            // the class we're adding
            $new_class          = ' watermark';
            // the existing classes plus the new class
            $class_names_to_add = $existing_classes . $new_class;
            $image->setAttribute('class', $class_names_to_add);
        }
        // Remove unwanted tags
        $content = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
        return true;
    }
}
?>

Add CSS class to all images in Joomla articles using PHP

1 Answers