web-dev-qa-db-ja.com

モバイル用に異なる画像サイズを表示する方法

以下を設定しました。

add_image_size( 'featured-image', 1600, 450, true );

これは、私が構築しているWebサイトで全角画像を提供するために使用されますが、想像できるように、モバイルの場合、これは途方もなく小さい高さに再スケーリングされ、モバイルではまったく変に見えます。

'featured-image-mobile'という名前の新しい画像サイズを作成しました。寸法は 650px by 448px です。

実際のページでは、次のように全角画像を表示しています。

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>"
    alt="<?php echo $altTag; ?>"
    title="<?php echo $titleTag; ?>">

私が保つことができる方法はありますか

the_post_thumbnail_url( 'featured-image' );

650px の画面解像度以外のすべてのために、そして次に画像サイズを変更しますか？

the_post_thumbnail_url( 'featured-image-mobile' );
imagesresponsive
1
rebeccasmith_me

WordPressのwp_is_mobile()はあなたが探している関数です。

// Use the build-in function if WP
if(wp_is_mobile()) // On mobile
{
    the_post_thumbnail_url('featured-image-mobile');
}
else
{
    the_post_thumbnail_url('featured-image');
}
3
Jean-Rémi LARCELET-PROST

両方のイメージを出力し、cssを使用して2つを切り替えることができます（ここでは基本的なブートストラップクラスを使用していますが、わかりやすくするために不要なマークアップを省略しています）。

<div class="featured-image hidden-xs">
   <img src="<?php the_post_thumbnail_url( 'featured-image' )?>">
</div>

<div class="featured-image-mobile visible-xs-block">
   <img src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">
</div>

あるいは、モバイル版の画像をカスタム属性として追加することもできます。

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>" data-mob-src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">

その後、モバイルのJavascriptを使用して画像のソースを切り替えます。

2
Svartbaard