响应图像-将源集属性添加到自定义图像函数

时间:2017-08-15 作者:JoaMika

当我使用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
">
在下面的自定义函数中,是否有本机wordpress函数或其他方式输出图像的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\');

2 个回复
最合适的回答,由SO网友:Johansson 整理而成

我想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 ); ?>">

SO网友:Alfrex92

看看这篇文章https://alexwright.net/web-design-secrets/responsive-images-wordpress/

它解释了srcset和响应图像如何在Wordpress中工作。

结束

相关推荐

Responsive Images

是否有本机功能可以根据屏幕分辨率显示帖子缩略图或图库图像的正确响应图像大小?通常我使用:1、自定义图像大小:function customImageSetup () { add_theme_support( \'post-thumbnails\' ); add_image_size(\'grid_1 mini square\', 60, 60, TRUE); add_image_size(\'grid_2\', 160); add_image_size(\'