我想將<picure>-tag 與 function一起使用wp_get_attachment_image。目前我得到一個<img>帶有srcset. 這很好，但是有什么方法可以將其更改為<picure>包含多個來源的 -tag 嗎？像這樣：<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>我需要它，因為我想顯示圖像的第二個版本。所以我可以在一個標(biāo)簽中擁有水平和垂直圖像<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>
1 回答
慕標(biāo)琳琳
TA貢獻(xiàn)1830條經(jīng)驗 獲得超9個贊
從 5.6.0 開始，我們有了一種包裝 img 元素的方法。
apply_filters( 'wp_get_attachment_image', $html, $attachment_id, $size, $icon, $attr );
過濾器不提取 post_id 而是提取 attachment_id。因此，如果您想系統(tǒng)地激活該功能，您應(yīng)該通過帖子元鏈接附件及其移動圖像。
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 );
- 1 回答
- 0 關(guān)注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消