php - que - selector padre css

Agregue una clase de CSS a todas las imágenes en una página que tenga un ancho inferior a 480px usando DomDocument

Question

Me gustaría agregar una clase de CSS a todas las imágenes en la página (publicaciones / páginas de WordPress) que están por debajo de cierto ancho.

Los siguientes trabajos pero setAttribute reemplaza todos los nombres de clase en cada img con el nuevo.

¿Cómo puedo agregar una nueva clase a cada imagen, sin reemplazar las clases existentes?

function add_class_to_small_images( $content ) {

$dom = new DOMDocument();
@$dom->loadHTML( $content );
$dom->preserveWhiteSpace = false;

$images = $dom->getElementsByTagName(''img'');

foreach ($images as $image) {

    $width = $image->getAttribute(''width'');

    if( $width < 480) {
        $image->setAttribute(''class'', ''this-will-be-the-class''); // the new class
    }
}

  $content = $dom->saveHTML();


return $content;
}
add_filter(''the_content'', ''add_class_to_small_images'');

Answer 1

Ok esto funciona Agarré las clases existentes y las agregué nuevamente a setAttribute con la nueva clase que quería. Si alguien tiene un método mejor, házmelo saber.

function add_class_to_small_images( $content ) {

$dom = new DOMDocument();
@$dom->loadHTML( $content );
$dom->preserveWhiteSpace = false;

$images = $dom->getElementsByTagName(''img'');

foreach ($images as $image) {

    // get the widths of each image
    $width = $image->getAttribute(''width'');

    // the existing classes already on the images
    $existing_classes = $image->getAttribute(''class'');

    // the class we''re adding
    $new_class = '' this-will-be-the-class'';

    // the existing classes plus the new class
    $class_names_to_add = $existing_classes . $new_class;

    // if image is less than 480px, add their old classes back in plus our new class
    if( $width < 480) {
        $image->setAttribute(''class'', $class_names_to_add);
    }
}

  $content = $dom->saveHTML();


return $content;
}