我在 Voog 网站构建器上将图片添加到我的博客文章时遇到了一些问题。 基本上，我试图在我的博客页面上使用文章的图片，以便列出的每篇文章都有自己特定的背景图片。
文章的图片网址为{{ article.image }}，但是这总是返回原始图片文件，这会导致加载时间更长，并且没有考虑元素的大小，在我的例子中是很小的(500px)。
我想我可以使用替换过滤器手动更改每个文件的 URL 以使其使用特定的后缀：{{ article.image | replace: '.jpg', '_block.jpg' }}，但这看起来很混乱，我必须为每个可能的图像扩展名重复它。
有没有更好的方法来实现这一点？
【问题讨论】：
标签： liquid templating voog
要为文章获取特定尺寸的图片，您可以使用{{ article.image.for-width-500 }}
在此处查看 Voog 开发人员文档中的示例用法：http://www.voog.com/developers/markup/objects/image
但是，对于 OG 标签，建议同时使用 page.image 和 article.image。例如：https://github.com/Voog/design-anchorage/blob/master/components/site-meta.tpl#L24。
因此，对于网站上的实际图片，如果它们没有严格绑定并保持与 Facebook OG 图片相同，则应使用背景选择器，它基本上是一个通用的背景图片和颜色选择工具 (http://www.voog.com/developers/scripting/javascripts/bgpicker) .
Barcelona 设计 (http://barcelona.voog.com) 中提供了此示例的实时示例，编辑器可以在博客列表中添加图像。这是博客和新闻布局中的一个示例：https://github.com/Voog/design-barcelona/blob/master/layouts/blog___news.tpl。
还有第三个示例 - 这是一个适应各种屏幕尺寸的背景图像，提供当前适合的最佳最佳图像尺寸：https://github.com/Voog/design-anchorage/blob/master/components/template-styles.tpl#L56
【讨论】：