wake-up-neo.com

Fügen Sie Attribute für Breite und Höhe für alle Bilder ein, die auf jeder Seite angezeigt werden

Unter Verwendung des WordPress-Tags the_content führe ich eine benutzerdefinierte Funktion aus, um nach allen Bildern zu suchen, für die kein Attribut width und height festgelegt ist, und füge die richtigen Abmessungen ein. Unten ist die Funktion:

add_filter( 'the_content', 'add_img_dimensions' );

function add_img_dimensions( $image_no_dimensions ) { // Insert width & height to images missing dimensions
    if ( preg_match_all( '/<img [^>]+width=[^>]+height=>/i', $image_no_dimensions, $result ) ) {
        // Do nothing...
    }
    else {
        preg_match_all( '/(alt|title|src)=("[^"]*")/i', $image_no_dimensions, $img );
        list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , ( $img[2][0] ) ) );
        $imgname = str_replace( "\"", "" , ( $img[2][0] ) );
    }

    return sprintf( '<img src="%s" width="%dpx" height="%dpx" />', str_replace("\"", "" , ( $img[2][0] ) ), $width, $height );
}

Wenn sich beispielsweise auf einer meiner Seiten ein Bild befindet, das wie folgt aussieht:

<img src="https://link.to/sum/img.jpg" alt="Image Title" />

Anschließend werden der width und der height des aktuellen Bildes eingefügt:

<img width="150" height="50" src="https://link.to/sum/img.jpg" alt="Image Title" />

Die Funktion funktioniert wie erwartet. Der gesamte Inhalt der Seite wird jedoch durch das erste gefundene Bild ersetzt, für das keine Abmessungen festgelegt wurden.

Wie kann ich return den gesamten Inhalt ändern, aber nur die Bilder, die keine Dimension haben?

Vor und nach enter image description here 

functionsimagesimage-sizeadd-image-size
2
Ethan Jinks O'Sullivan

Getestet und bestätigt, dass dies funktioniert:

add_filter( 'the_content', 'add_image_dimensions' );

function add_image_dimensions( $content ) {

    preg_match_all( '/<img[^>]+>/i', $content, $images);

    if (count($images) < 1)
        return $content;

    foreach ($images[0] as $image) {
        preg_match_all( '/(alt|title|src|width|class|id|height)=("[^"]*")/i', $image, $img );

        if ( !in_array( 'src', $img[1] ) )
            continue;

        if ( !in_array( 'width', $img[1] ) || !in_array( 'height', $img[1] ) ) {
            $src = $img[2][ array_search('src', $img[1]) ];
            $alt = in_array( 'alt', $img[1] ) ? ' alt=' . $img[2][ array_search('alt', $img[1]) ] : '';
            $title = in_array( 'title', $img[1] ) ? ' title=' . $img[2][ array_search('title', $img[1]) ] : '';
            $class = in_array( 'class', $img[1] ) ? ' class=' . $img[2][ array_search('class', $img[1]) ] : '';
            $id = in_array( 'id', $img[1] ) ? ' id=' . $img[2][ array_search('id', $img[1]) ] : '';
            list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );

            $image_tag = sprintf( '<img src=%s%s%s%s%s width="%d" height="%d" />', $src, $alt, $title, $class, $id, $width, $height );
            $content = str_replace($image, $image_tag, $content);
        }
    }

    return $content;
}
3
Nate Allen

Sie müssen immer den vollständigen Inhalt zurückgeben, wenn Sie den the_content-Filter verwenden. Aber der Code, den Sie haben, wird sowieso nicht ganz mit mehreren Bildern umgehen ... so etwas könnte es besser machen, wenn Sie zuerst alle Bild-Tags extrahieren und dann eine Schleife machen, um die Breite/Höhe zu jedem hinzuzufügen und das ursprüngliche Tag zu ersetzen:

add_filter( 'the_content', 'add_img_dimensions' );

function add_img_dimensions( $content ) { 

    preg_match_all( '/<img[^>]+>/i', $content, $images);
    if (count($images) < 1) {return $content;}

    foreach ($images as $image) {
        preg_match_all( '/(alt|title|src|width|height)=("[^"]*")/i', $image[0], $img );
        // Insert width & height to image if no width specified
        if (!isset($img[3])) {
            $imgalt = str_replace( "\"", "" , ( $img[0][0] ) );                                 
            $imgtitle = str_replace( "\"", "" , ( $img[1][0] ) );
            $imgname = str_replace( "\"", "" , ( $img[2][0] ) );                
            list( $width, $height, $type, $attr ) = getimagesize( $imgname );
            $newimagetag = sprintf( '<img src="%s" alt="%s" title="%s" width="%dpx" height="%dpx" />', $imgname, $imgalt, $imgtitle, $width, $height );
            $content = str_replace($image, $newimagetag, $content);
        }
    }

    return $content;
}

Hinweis: Ungetestet Ich bin mir nicht sicher, ob die Indexreferenzen genau richtig sind. Außerdem verlieren Sie auf diese Weise Inline-Stile oder andere Attribute (z. B. Rahmen). Daher müssten weitere Schritte unternommen werden, um diese zu erhalten.

0
majick