shopify - Shopify 产品系列页面上的产品图片尺寸不断变化

Shopify：我们产品系列页面上的产品图片尺寸不断变化

三位大师无法帮助解决我们的非营利商店遇到的问题。如果可以的话，我们将永远感激不尽。

我们收藏页面上的图片尺寸不断变化。

我们在 Chrome、Safari 和 IE 上遇到了这个问题。我在电脑上。一位从未访问过该网站的同事在 PC 上的多个浏览器上也遇到了同样的问题。我今天与一位使用 Mac 的大师交谈，他也有同样的经历。是的，我刷新了我的缓存，但这并没有帮助（我们认识到，当从未访问过该网站的人遇到同样的问题时）。

我们使用的是 Supply 主题的修改版本。我无法想象对导致此问题的主题进行任何编辑。

请看我们商店的这个收藏页面，它正在开发中： https ://gfh2.myshopify.com/collections/defenders-of-wildlife （是的，我知道没有主页。长篇大论）

当然，产品图片都应该是相同的宽度。但它们不是，它们会不时地在浏览器之间变化。

有时只有几张图片以非常小的尺寸出现，例如您在此屏幕截图中看到的： https ://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_7.PNG?6100116406257966738

如果你点击产品页面，图片都是正确的尺寸。

有时有些图片看起来比它们应该的要小一些（在 70% 到 90% 的范围内，并且至少三个这样的较小尺寸，例如您在此处看到的： https ://cdn.shopify.com/s/files/ 1/2326/7959/files/small_pics_6.PNG?6100116406257966738

有时，如果我单击收藏页面上的产品图像转到该产品，然后单击返回按钮返回收藏页面，并重复几次，则收藏页面上的图像以正确的大小显示或在 70% 或 85% 的大小。有一次，今天晚上需要三个往返才能做到这一点。还有一次需要七次往返。

其他集合也会出现这个问题，例如[Stack Overflow 限制我可以提供多少链接，所以只需将上面提供的集合链接更改为 /first-book

我点击第一个进入产品页面，然后返回收藏页面，进行了三个往返，然后一张图片以正确的尺寸出现在收藏页面上。请参阅 https://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_10.PNG?16317572828225077891

我查看了另一个浏览器（上面的操作在 Chrome 中；我查看了 IE），那里的所有图片仍然很小。刷新页面 10 次没有帮助。

回到 Chrome。单击第二张图片并单击返回，几次往返。然后收藏页面上的图片变大了，但是第一张图片又变小了。

非常感谢！

标签： shopify

Shopify 通过调整服务器上的图像文件大小为您的页面提供图像。目的是改善页面加载时间，同时确保各种屏幕尺寸和布局的正确样式。生成的图像文件也更少。

为此，Shopify 服务器将需要更多信息，而不仅仅是文件名，还需要大小信息。

它使用 {image url filter} 将大小数据包含在图像文件名中。

这是您的图片网址之一。

https://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_1.PNG?6100116406257966738

以下是包含图像大小的图像 url 示例。请注意图像名称（船鞋）和图像格式（.jpeg）之间的“720x720”。

https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_720x720.jpeg?v=1459175177

图片 url 过滤器的帮助部分指出：“如果您不包含图像大小，过滤器会返回一个小 (100x100) 图像。” 这可以解释你的问题。这是我引用的帮助部分的 URL。

https://help.shopify.com/en/themes/liquid/filters/url-filters#size-parameters

（如果您习惯于以图形方式调整图像大小，然后在页面上以该大小查看图像，那么这是可以理解的反直觉。）

还有其他可能性。我需要查看主题代码以获得更明确的答案。如果我能提供帮助，请联系我。