如何在 Voog 建站神器上为博客文章添加背景图片？
How to add background images to blog articles on Voog website builder?
我在使用 Voog 建站工具向我的博客文章添加图片时遇到了一些问题。
基本上，我试图在我的博客页面上使用文章的图片，以便每篇列出的文章都有自己特定的背景图片。
文章的图片 URL 可作为 {{ article.image }} 使用，但这始终是 returns 原始图片文件，这会导致加载时间较长并且没有考虑元素的大小，在我的例子中非常小 (500px)。
我想我可以使用替换过滤器手动更改每个文件 URL 以使其使用特定的后缀：{{ article.image | replace: '.jpg', '_block.jpg' }}，但这看起来很乱，我必须为每个可能的图像扩展名重复它。
有没有更好的方法来实现这个目标？
要为文章获取特定尺寸的图像，您可以使用 {{ article.image.for-width-500 }}
请在此处查看 Voog 开发人员文档中的示例用法：http://www.voog.com/developers/markup/objects/image
但是，page.image 和 article.image 都建议用于 OG 标签。例如：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) where the editor can add an image on the blog listing. Here is an example from the Blog & News layout: 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
我在使用 Voog 建站工具向我的博客文章添加图片时遇到了一些问题。 基本上，我试图在我的博客页面上使用文章的图片，以便每篇列出的文章都有自己特定的背景图片。
文章的图片 URL 可作为 {{ article.image }} 使用，但这始终是 returns 原始图片文件，这会导致加载时间较长并且没有考虑元素的大小，在我的例子中非常小 (500px)。
我想我可以使用替换过滤器手动更改每个文件 URL 以使其使用特定的后缀：{{ article.image | replace: '.jpg', '_block.jpg' }}，但这看起来很乱，我必须为每个可能的图像扩展名重复它。
有没有更好的方法来实现这个目标？
要为文章获取特定尺寸的图像，您可以使用 {{ article.image.for-width-500 }}
请在此处查看 Voog 开发人员文档中的示例用法：http://www.voog.com/developers/markup/objects/image
但是，page.image 和 article.image 都建议用于 OG 标签。例如：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) where the editor can add an image on the blog listing. Here is an example from the Blog & News layout: 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