it-swarm.com.de

Responsive Klasse für alle Bilder im Inhalt

Ich habe diese Funktion verwendet, um allen Bildern im Inhalt eine Reaktionsklasse hinzuzufügen, aber dies bricht die HTML-Struktur der Website. Dies umschließt den Inhalt mit: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><body> the content goes here (output from the_content();) </body></html>

function add_responsive_class($content)
{
    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    if (!empty($content)) {
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName('img');
        foreach ($imgs as $img) {
            $classes = $img->getAttribute('class');
            $img->setAttribute('class', $classes . ' img-fluid');
        }

        $html = $document->saveHTML();
        return $html;
    }
}
add_filter('the_content', 'add_responsive_class');
add_filter('acf_the_content', 'add_responsive_class');

Darf ich wissen, warum? eine alternative lösung dafür?

1

Das Parsen und Ändern von HTML-Code mit der Standardbibliothek PHP ist ein ziemlicher Aufwand. Es gibt viele Fallstricke. Hier ist ein gut dokumentiertes Beispiel, das allen Bildern im Inhalt die Klasse img-fluid hinzufügt.

Um sicherzustellen, dass die Tags doctype und HTML nicht zum HTML-Fragment hinzugefügt werden, wird eine Lösung aus this StackOverflow answer verwendet:

$dom->loadHTML( $content ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

Beachten Sie, dass es dafür andere Möglichkeiten gibt, die in dem von mir verlinkten Beitrag SO erläutert werden, aber diese Lösung hat sich für mich bewährt.

Der Code, den ich unten gepostet habe, erweitert diese Lösung, um auch utf8-Zeichen zu verarbeiten.

/**
 * Adds img-fluid class to images in content.
 * Fire late to affect gallery images.
 */
add_filter( 'the_content',     'add_responsive_class', 9999 );
add_filter( 'acf_the_content', 'add_responsive_class', 9999 );
function add_responsive_class( $content ) {
    // Bail if there is no content to work with.
    if ( ! $content ) {
        return $content;
    }

    // Create an instance of DOMDocument.
    $dom = new \DOMDocument();

    // Supress errors due to malformed HTML.
    // See http://stackoverflow.com/a/17559716/3059883
    $libxml_previous_state = libxml_use_internal_errors( true );

    // Populate $dom with $content, making sure to handle UTF-8, otherwise
    // problems will occur with UTF-8 characters.
    // Also, make sure that the doctype and HTML tags are not added to our HTML fragment. http://stackoverflow.com/a/22490902/3059883
    $dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

    // Restore previous state of libxml_use_internal_errors() now that we're done.
    libxml_use_internal_errors( $libxml_previous_state );

    // Create an instance of DOMXpath.
    $xpath = new \DOMXpath( $dom );

    // Get images.
    $imgs = $xpath->query( "//img" );

    // Add additional classes to images.
    foreach ( $imgs as $img ) {
        $existing_class = $img->getAttribute( 'class' );
        $img->setAttribute( 'class', "{$existing_class} img-fluid" );
    }

    // Save and return updated HTML.
    $new_content = $dom->saveHTML();
    return $new_content;
}
2
Dave Romsey