了解WordPress图像大小和响应图像

时间:2017-12-01 作者:Runnick

我只是不明白add\\u image\\u size()和响应图像是如何工作的。

假设我有一个缩略图720×360.

所以我想我需要增加尺寸add_image_size(\'post-thumbnail\', 720, 320, true) //hard crop

我上传尺寸为3000×2000的图像,以适应视网膜屏幕等。

现在我将它添加到页面the_post_thumbail(\'post-thumbnail\') 但它根本不构建srcset!

如果我使用the_post_thumbail(\'full\') 它构建srcset 但不保留纵横比。

那我现在该怎么办?

我需要从最大的开始添加更多尺寸吗?例如:

add_image_size(\'post-thumbnail\', 3200, 1600, true); add_image_size(\'post-thumbnail-lg\', 1600, 800, true); add_image_size(\'post-thumbnail-sm\', 1200, 600, true); add_image_size(\'post-thumbnail-xs\', 400, 200, true);

如果没有,我将如何保持纵横比?

2 个回复
SO网友:Daniel Fonda

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = \'(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\';
   return $sizes;
}
add_filter( \'wp_calculate_image_sizes\', \'adjust_image_sizes_attr\', 10 , 2 );
如下所述:https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/

SO网友:Glen Charles Rowell

如果在将图像上传到页面后添加代码,则还需要使用类似Alex Mills(Viper007Bond)的Regenate Thumbnails的插件重新生成图像。https://wordpress.org/plugins/regenerate-thumbnails/

我也在尝试做同样的事情,发现许多页面提供的代码不起作用,所以我想在这里添加一个更新,因为当人们试图解决相同的问题时,这个页面会显示出来。

下面是一些示例代码,根据图像的大小加载不同的大小。如果将980px宽度的图像加载到页面上,则会比将670px宽度的图像加载到页面上时有更多的中断。设置由您在页面上放置图像时选择的大小决定。希望有人觉得这有用。我还发现,您可以在返回旁边添加额外的代码,并将其他值注入sizes属性。我们不需要这样做,但这很有趣。返回$大小"E;“这里有些东西”;;

function adjust_image_sizes_attr($sizes,$size){
    $width = $size[0];
    if($width >= 980){
        $sizes = \'
        (max-width:320px)100vw,
        (max-width:335px)100vw,
        (max-width:414px)100vw,
        (max-width:640px)100vw,
        (max-width:670px)100vw,
        (max-width:768px)100vw,
        (max-width:950px)100vw,
        (max-width:980px)980px,980px\';
    }
    elseif($width >= 670){
        $sizes = \'
        (max-width:320px)100vw,
        (max-width:414px)100vw,
        (max-width:670px)670px,670px\';
    }
    else{
        $sizes= \'(max-width:\' . $width . \'px) 100vw,\' . $width . \'px\';}
    return $sizes;
}
add_filter(\'wp_calculate_image_sizes\', __NAMESPACE__ . \'\\\\adjust_image_sizes_attr\',10,2);
如果您只需要特定的尺寸,可以将100vw替换为您想要加载的尺寸。

结束

相关推荐

Menu Responsive

如何使菜单栏响应?当我将窗口裁剪为手机大小时,菜单不会随标题一起更改,在标题图像和菜单栏之间留下空白,或者重复显示两次菜单。