使用 DomDocument 将 CSS 类添加到页面上宽度小于 480px 的所有图像 - Add a CSS class to all images on a page that have a width less than 480px using DomDocument

Add a CSS class to all images on a page that have a width less than 480px using DomDocument

我想为页面上低于一定宽度的所有图像（WordPress帖子/页面）添加一个CSS类。

以下方法有效，但 setAttribute 正在用新 img 替换每个 img 中的所有类名。

如何在不替换现有类的情况下向每个图像添加新类？

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

好的，

这有效。抓取现有类，并使用我想要的新类将它们添加回 setAttribute 中。如果有人有更好的方法，请告诉我。

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;
}