it-swarm-es.tech

Agregue una clase a todas las imágenes del artículo dinámicamente

Estoy tratando de construir un complemento que agregue una clase a todas las imágenes en mis artículos. Hasta ahora tengo el siguiente código:

<?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;
        // Find images and add a class
    }
?>

Pero no sé cómo puedo encontrar imágenes en el contenido y agregarles una clase. Además, las imágenes pueden tener una clase ya, en ese caso quiero agregar una nueva a las clases existentes.

Editar:
Tengo un complemento que marca cualquier imagen con una determinada clase, pero como el sitio ya tiene muchas imágenes, me gustaría agregar la clase a las imágenes dinámicamente en lugar de pasar por cada <img> etiqueta en el sitio y agrega las clases.

Soy consciente de que puedo apuntar a todas las imágenes con CSS, simplemente no ayuda en este caso.

5
Bogowoe

Puede cargar el contenido en una DOMDocument() y manipularlo.

<?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;
        // Find images and add a class
        $dom = new DOMDocument();
        @$dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
        $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 you want to add
            $new_class          = ' yourclass';
            // the existing classes plus the new class
            $class_names_to_add = $existing_classes . $new_class;
            $image->setAttribute('class', $class_names_to_add);
        }
        // $dom now contains a complete HTML source, remove unnecessary tags
        $content = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
        return true;
    }
}
?>
3
johanpw

Por qué querrías hacer esto?

Puede orientar fácilmente todas las imágenes de un artículo con CSS sin utilizar un complemento, todo lo que necesita es un poco de CSS;

.view-article img { // My awesome styles here ;}

Apunta a todas las imágenes en sus artículos y no agrega ninguna sobrecarga o complejidad, como lo haría un complemento. La forma más simple es siempre la mejor.

Mantenible, escalable, seguro.

3
Seth Warburton