WordPress：使用 <picture>-tag 和 wp_get_attachment_image

Question

我想将 <picure> 标签与函数 wp_get_attachment_image 一起使用。目前我得到一个 <img>-标签 srcset。很好，但是有什么办法可以将它更改为包含多个来源的 <picure> 标签吗？像这样：

<picture>
  <source media="(min-width: 56.25em)" srcset="large.jpg 1x, large@2x.jpg 2x">
  <source media="(min-width: 37.5em)" srcset="medium.jpg 1x, medium@2x.jpg 2x">
  <source srcset="small.jpg 1x, small@2x.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

我需要它，因为我想显示图像的第二个版本。所以我可以在一个 <picture> 标签中包含水平和垂直图像。像这样：

<picture>
  <source media="(min-width: 38em)" srcset="art-direction-horizontal.jpg">
  <source srcset="art-direction-vertical.jpg">
  <img src="art-direction-vertical.jpg" alt="">
</picture>

Answer 1

从 5.6.0 开始，我们有了一种包装 img 元素的方法。

apply_filters( 'wp_get_attachment_image', $html, $attachment_id, $size, $icon, $attr );

过滤器不提取 post_id，而是提取 attachment_id。因此，如果您想系统地激活该功能，您应该 link 通过 post meta.

附件及其移动图像。

function wrap_wp_get_attachment_image_with_picture_tag( $html, $attachment_id, $size, $icon, $attr ){
    if ( is_admin() || $size == 'medium' || $size == 'thumbnail' ) return $html;
    if ( $mobile_id = get_post_meta( $attachment_id, '_meta_key_of_mobile_picuture_id', true ) ){
        $mobile_srcset = wp_get_attachment_image_srcset( $mobile_id, 'medium_large' );
        $html = '<picture><source media="( max-width : 782px )" srcset="'.$mobile_srcset.'">'.$html.'</picture>';
    }
    return $html;
}
add_filter( 'wp_get_attachment_image', 'wrap_wp_get_attachment_image_with_picture_tag', 10, 5 );

WordPress：使用 <picture>-tag 和 wp_get_attachment_image

WordPress: Use <picture>-tag with wp_get_attachment_image

html

php

wordpress

responsive-design

responsive-images