Fügen Sie mit DomDocument allen Bildern auf einer Seite, die eine Breite von weniger als 480 Pixel haben, eine CSS-Klasse hinzu

Question

Aug 16, 2012, 02:34 AM

Fügen Sie mit DomDocument allen Bildern auf einer Seite, die eine Breite von weniger als 480 Pixel haben, eine CSS-Klasse hinzu

Ich möchte allen Bildern auf der Seite (WordPress-Post / Seiten), die eine bestimmte Breite unterschreiten, eine CSS-Klasse hinzufügen.

Folgendes funktioniert abersetAttribute ersetzt alle Klassennamen in jedem Bild durch den neuen.

Wie kann ich jedem Bild eine neue Klasse hinzufügen, ohne die vorhandenen Klassen zu ersetzen?

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');