【发布时间】:2019-10-27 20:16:23
【问题描述】:
我想为我的 Wordpress 网站使用响应式图片。我修改了默认图像大小并在我的functions.php 顶部添加了一些:
add_action('init', function(){
// adjusting
update_option( 'thumbnail_size_w', 300, false );
update_option( 'thumbnail_size_h', 0, false );
update_option( 'thumbnail_crop', 0 );
update_option( 'medium_size_w', 1000, false );
update_option( 'medium_size_h', 0, false );
update_option( 'medium_crop', 0 );
update_option( 'medium_large_size_w', 1600, false );
update_option( 'medium_large_size_h', 0, false );
update_option( 'medium_large_crop', 0 );
update_option( 'large_size_w', 2000, false );
update_option( 'large_size_h', 0, false );
update_option( 'large_crop', 0 );
// adding
add_image_size( 'i100', 100, '0', false );
add_image_size( 'i200', 200, '0', false );
add_image_size( 'i400', 400, '0', false );
add_image_size( 'i600', 600, '0', false );
add_image_size( 'i800', 800, '0', false );
add_image_size( 'i1300', 1300, '0', false );
add_image_size( 'i2500', 2500, '0', false );
});
这应该会产生一个包含 11 种尺寸的列表,例如:
100, 200, 300, 400, 600, 800, 1000, 1300, 1600, 2000, @987654
如果我上传新图像,那么当我使用 Regenerate-Thumbnails-Plugin 时,图像也会缩小到这些大小。好的。我还将max_srcset_image_width 的大小增加到2500。
所以现在,当我想使用
wp_get_attachment_image( $attachment_id, 'large' );
魔法开始:
有时,结果几乎如预期:
<img src="image1-1300x867.jpg"
srcset="image1-1300x867.jpg 1300w,
image1-1600x1068.jpg 1600w,
image1-2000x1335.jpg 2000w,
image1-100x67.jpg 100w,
image1-300x200.jpg 300w,
image1-1000x667.jpg 1000w,
image1-200x133.jpg 200w,
image1-400x267.jpg 400w,
image1-600x400.jpg 600w,
image1-800x534.jpg 800w,
image1-2500x1668.jpg 2500w" >
-> 我调用了large,我将其宽度定义为2000,而不是将1300 作为默认选择的图像。而且订单不是很漂亮。但是,嘿,没关系,至少它起作用了。
有时,甚至没有多种尺寸:
<img src="image2.jpg">
-> 但是,嘿,图像出现了
有时,未定义的大小(如333)会混入 srcset,它不在上传目录中,从而导致图像损坏:
<img src="image3-1300x1950.jpg"
srcset="image3-1300x1950.jpg 1300w,
image3-1600x2400.jpg 1600w,
image3-2000x3000.jpg 2000w,
image3-100x150.jpg 100w,
image3-333x500.jpg 333w,
image3-300x450.jpg 300w,
image3-1000x1500.jpg 1000w,
image3-200x300.jpg 200w,
image3-400x600.jpg 400w,
image3-600x900.jpg 600w,
image3-800x1200.jpg 800w,
image3-2500x3750.jpg 2500w" >
-> 但是,嘿,12 个来源中有 11 个有效
有时,奇怪的尺寸会占据主导地位:
<img src="image4-700x1050.jpg"
srcset="image4-700x1050.jpg 700w,
image4-333x500.jpg 333w,
image4-250x375.jpg 250w,
image4-768x1152.jpg 768w,
image4-120x180.jpg 120w,
image4-1333x2000.jpg 1333w,
image4-2000x3000.jpg 2000w,
image4-500x750.jpg 500w,
image4-1000x1500.jpg 1000w" >
-> 只有大小 1000 和 2000 实际上在上传文件夹中。所有其他尺寸均不作为实际文件存在,也无法在浏览器中显示。
注意:我从 html 中删除了其他属性,更改了 url 以提高可读性。这 4 个示例是使用完全相同的代码、相同的模板文件以及非常相似的图像生成的。但是:每个图像的怪异度都保持不变,例如image2 的 html 看起来总是一样的。
我可以做些什么来获得一些订单并避免损坏的图片链接? 我想我需要确切地告诉 Wordpress 在 srcset 属性中使用什么大小。但我找不到解决办法。
编辑: 事实证明,错误的图像尺寸来自数据库,在wp_postmeta 表中存储为_wp_attachment_metadata。现在的问题是:如何更新所有这些信息?
【问题讨论】:
标签: wordpress image responsive srcset