【问题标题】:Wordpress picks wrong sizes for srcset, resulting in broken urlsWordpress 为 srcset 选择了错误的大小,导致 URL 损坏
【发布时间】: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" >

-> 只有大小 10002000 实际上在上传文件夹中。所有其他尺寸均不作为实际文件存在,也无法在浏览器中显示。

注意:我从 html 中删除了其他属性,更改了 url 以提高可读性。这 4 个示例是使用完全相同的代码、相同的模板文件以及非常相似的图像生成的。但是:每个图像的怪异度都保持不变,例如image2 的 html 看起来总是一样的。

我可以做些什么来获得一些订单并避免损坏的图片链接? 我想我需要确切地告诉 Wordpress 在 srcset 属性中使用什么大小。但我找不到解决办法。


编辑: 事实证明,错误的图像尺寸来自数据库,在wp_postmeta 表中存储为_wp_attachment_metadata。现在的问题是:如何更新所有这些信息?

【问题讨论】:

    标签: wordpress image responsive srcset


    【解决方案1】:

    事实证明,从图像首次上传时起,图像大小及其网址就会被记住。即使图像大小发生变化并重新生成拇指,wp_postmeta 中存储的信息仍保持不变。

    Regenerate Thumbnail Plugins 我尝试重新生成所有图像大小,但没有更新存储在数据库中的图像元数据。 :/

    解决方案: 我安装了 WP CLI(也适用于共享主机,您的提供商可能有如何安装和使用它的教程)。确认它适用于wp --info。然后执行wp media regenerate 重新生成所有图像。这也会更新数据库中的元信息,srcset 最终会正确呈现。

    Install WP CLI

    wp media regenerate

    【讨论】:

      【解决方案2】:

      有一个不使用 WP CLI 的解决方案。

      您可以安装一个名为Media Meta & Force Regenerate的插件。


      - 通过Plugins>Add New免费下载
      - 按Activate
      - 前往Media Library 并选择视图作为List 图标
      - 然后按每张图片旁边出现的REGENERATE 按钮

      【讨论】:

        猜你喜欢
        • 2018-09-12
        • 2013-04-15
        • 2020-09-23
        • 1970-01-01
        • 1970-01-01
        • 2017-06-06
        • 2011-06-05
        • 2016-05-29
        • 2016-04-08
        相关资源
        最近更新 更多