WP 4.4。「間違った」ものを選択するレスポンシブ画像ブラウザ


9

WP 4.4でよかった。組み込みのレスポンシブ画像機能が同梱されています。しかし、私はそれに満足していません。

私の中でいくつかのカスタム画像サイズを設定しましたfunctions.php

add_image_size( 'post-thumbnails'、600、600、true);
add_image_size( 'news-large'、1024、false);
add_image_size( 'news-small'、500、false);
add_image_size( '3-col'、500、375、true);
add_image_size( 'presscutting'、600、850、true);
add_image_size( 'medium-large'、768、false); //デバイスサポートのために本日追加
add_image_size( 'full-feature-image'、2000、false);
add_image_size( 'gallery-image'、800、600、true);

私は考え出したように、トリミングされていない画像が(へセットをトリミングfalse)に添加されますsrcset。次のような画像がフロントエンドに出力されます(読みやすくするために改行が追加されています)。

<img width = "2000" height = "1335"
src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
class = "attachment-full-feature-image size-full-feature-image"
alt = "asdf"
srcset = "
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-300x200.jpg 300w、 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-768x513.jpg 768w、 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-1024x683.jpg 1024w、 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-500x334.jpg 500w " 
size = "(max-width:2000px)100vw、2000px">

しかし今私の問題:画面には、1600pxの画面解像度がありませんが、1024pxの幅で指定された画像のみが表示されます。そのため、すべての画像がぼやけて見えます。

WPやブラウザに2kpx画像を使用させるにはどうすればよいですか? 1280px、1440px、1600px、1968pxなどの新しい画像サイズを追加する必要がありますか?または、ぼやけて小さすぎるバージョンを表示するのではなく、大きな画像を使用するようにWP /ブラウザに指示する簡単な方法はありますか?


正しい使い方で試して頂けますadd_image_sizeか?width引数は常にfalseに設定します。これは整数である必要があります(3番目の引数)。
fischi

OK、それを行い、9999の高さの値を追加しました。サムネイルのサイズを変更しました。役立たず。
rob_st

デフォルトのmax_srcset_image_widthフィルタは1600です
birgire

@birgireについて知っておくと役立ちますが、あまり役に立ちません。どうすれば変更できますか(まだドキュメントがないようです)-変更により問題が解決しますか?
rob_st

回答:


9

ドキュメントに関しては、Make Blogに次のブログ投稿があります。

WordPress 4.4のレスポンシブ画像

コメントで言及されている1600pxの制限を増やすには、これを試してください:

add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
    return 2000;
}, 10, 2);

最後に、すでに述べたように、呼び出しを修正する必要があります add_image_size

add_image_size( 'news-large'、1024、false);

する必要があります

add_image_size('news-large', 1024, 0, false);

ありがとうございました。高さを9999に設定しました-違いはありますか?やってみます。
rob_st 2015

ありがとうございました。それは基本的に同じ答えですが、この1と実際に私が好むという名前の関数-あなたが最初だったので、私はあなたを受け入れた:-)
rob_st

これが私が必要とする答えかもしれないと思いますが、私はどんな価値がある$size_arrayべきか分かりません。
Telarian 2018

1

srcsetはあなたにあなたが追加できるフィルター機能で余分なサイズを追加することで同じ問題を解決しましたfunctions.php

function filter_max_srcset( $max_width, $size_array ) {
    if ( $size_array[0] === 1800 ) {
        $max_width = 1800;
    }
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'filter_max_srcset', 10, 2 );
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.