web-dev-qa-db-ja.com

各ページに表示されているすべての画像に幅と高いの属性を挿入する

WordPressのthe_contentタグを使用して、widthおよびheight属性が設定されていないすべての画像を検索し、適切な寸法を挿入するカスタム関数を実行しています。以下はその機能です。

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

たとえば、私のページの1つに次のような画像があるとします。

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

次に実際の画像のwidthとheightを挿入します。

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

機能は期待どおりに機能します。ただし、ページのコンテンツはすべて、サイズが設定されていないことが判明した最初の画像に置き換えられます。

どのようにしてすべてのコンテンツをreturnしても、寸法のない画像だけを変更することができますか？

前後enter image description here

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

これが動作することをテストおよび確認しました。

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

the_contentフィルタを使用するときは、常に完全なコンテンツを返す必要があります。しかし、とにかくあなたが持っているコードは複数の画像を扱うことができないでしょう...最初にすべての画像タグを抽出し、次にそれぞれに幅/高さを追加して元のタグを置き換えるためにループすることによってこのようなことはより良いかもしれません：

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

注意：未テストインデックス参照が正しいかどうかわかりません...また、この方法でインラインスタイルや他の属性（たとえばborder）を失うことになるので、それらを保持するためにさらに行う必要があります。

0
majick