0

我正在尝试在我的 wordpress 主题中实现响应式图像。有一些插件可用，但我尝试过的插件弄乱了我的布局。

我基本上想做的是用响应式图像替换所有现有图像（不仅是特色图像或缩略图），或者使用 srcset 或

我的 wordpress 主题创建以下图像大小：

add_image_size( "maximal", "1900" );
add_image_size( "desktop", "1405" );
add_image_size( "tablet", "981" );
add_image_size( "smalltablet", "768" );
add_image_size( "mobile", "479" );

我试图用 preg_replace 函数替换 img 标签，但我从未设法捕获所有图像，我不确定这是否是最好的方法。我的一些图像有课程，有些没有。

最后，我想替换一个像这样的简单图像：

<img src="<destination"> id="<id>" class="<class">

通过这样的事情：

<picture>
<source srcset="<img src for mobile" media="(max-width: 500px)">
<source srcset="<img src for small tablets" media="(min-width: 700px)">
<source srcset="<img src for tablets" media="(min-width: 950px)">
<source srcset="<img src for desktop" media="(min-width: 1200px)">
<source srcset="<img src for big screens" media="(min-width: 1600px)">
</picture>

srcset 等效项也可以。

谢谢！洛朗

4

2 回答 2

1

我认为过滤器post_thumbnail_html可以解决问题，代码应该是这样的..

add_filter('post_thumbnail_html', 'picturefill_html', 99, 5);
function picturefill_html(){
    $id = get_post_thumbnail_id(); // get attachment id
    $src_small = wp_get_attachment_image_src($id, 'smalltablet'); // your new image size url
    $src_large = wp_get_attachment_image_src($id, 'maximal'); // your another new image size url
    $class = $attr['class'];

    $html = '
    <picture>
        <source srcset="'.$src_small[0].'" media="(max-width: 500px)">
        <source srcset="'.$src_large[0].'" media="(min-width: 1200px)">
    </picture>
    ';

    return $html;
}
于 2015-11-11T10:38:02.690 回答
0

Picturefill 现在集成在 Wordpress 中，您可以使用以下方法检索图像源和源集：

wp_get_attachment_image_url( get_post_thumbnail_id( [PUT POST ID HERE]), 'medium' );

获取图片源集：

wp_get_attachment_image_srcset( get_post_thumbnail_id([PUT POST ID HERE] ), 'medium' );

这样就容易多了！

谢谢洛朗

于 2016-01-04T14:13:25.980 回答