web-dev-qa-db-ja.com

レスポンシブイメージ - カスタムイメージにsrcset属性を追加する

get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );を使うとwordpressは自動的にsrcsetデータを次のように出力します。

<img 
    width="1000" 
    height="625" 
    src="https://x.cloudfront.net/wp-content/uploads/2017/08/photo.jpg" 
    class="attachment-entry-fullwidth size-entry-fullwidth wp-post-image" 
    alt="" 
    srcset="
        https://x.cloudfront.net/wp-content/uploads/2017/08/photo.jpg 1000w, 
        https://x.cloudfront.net/wp-content/uploads/2017/08/photo-768x480.jpg 768w" 
    sizes="
        (max-width: 767px) 95vw, 
        (max-width: 979px) 80vw, 1200px
">

下の私のカスタム関数でネイティブのワードプレス関数や画像のsrcsetデータを出力する別の方法はありますか？

function photo_shortcode($atts){
   extract(shortcode_atts(array(
      'no' => 1,
   ), $atts));

   $no     = ( $no       != ''     ) ? $no : 1;
   $images = get_field('fl_gallery');
   $image  = $images[$no];

if ($image) {
   $credit = get_field('fl_credit', $image['id']);
   return '<div class="kalim"><img title="' . esc_attr( sprintf( the_title_attribute( 'echo=0' ) ) ) . '" alt="' . esc_attr( sprintf( the_title_attribute( 'echo=0' ) ) ) . '" src="' . $image['url'] . '" /><div class="kalca">' . $image['caption'] . '</div>' . (!empty($credit) ? '<div class="kalcr">Credit:' . $credit . '</div></div>': '' ) ;
 }

}

add_shortcode('photo', 'photo_shortcode');
imagesresponsive
1
Joanna Mikalai

wp_get_attachment_srcset() はあなたが探しているものだと思います。

$srcset = wp_get_attachment_image_srcset( $image['id'], array( 100, 100 ) );

これで、HTMLをエスケープしてコード内で使用できます。

<img src="PATH HERE" srcset="<?php echo esc_attr( $srcset ); ?>">
1
Jack Johansson

この記事を見てください https://alexwright.net/web-design-secrets/responsive-images-wordpress/

Srcsetとレスポンシブ画像がWordpressでどのように機能するかを説明します。

0
Alfrex92