如何将背景图片添加到Voog网站建设者的博客文章中？

Question

我在添加图片到我的博客文章在Voog网站建设者有一些困难。基本上，我试图在我的博客页面上使用这篇文章的图片，这样列出的每一篇文章都有自己特定的背景图片。

本文的图像URL可以作为{{ article.image }}提供，但是它总是返回原始图像文件，这会导致加载时间更长，并且没有考虑到元素的大小，在我的例子中，这个大小非常小(500 of )。

我想我可以使用替换过滤器手动更改每个文件的URL，使它使用一个特定的后缀：{{ article.image | replace: '.jpg', '_block.jpg' }}，但这看起来很麻烦，我必须重复它对每一个可能的图像扩展名。

有什么更好的方法来实现这一点吗？

Answer 1

要为文章获取特定大小的图像，可以使用{{ 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图像保持相同，则应该使用背景选择器，这基本上是一个通用的背景图像和颜色选择工具(http://www.voog.com/developers/scripting/javascripts/bgpicker)。

在巴塞罗纳设计(http://barcelona.voog.com)中，编辑器可以在博客列表中添加一个图片。下面是Blog & News布局中的一个示例：news.tpl。

第三个例子--这里还有一个背景图像，它可以适应不同的屏幕大小，提供当前合适的最佳图像大小：https://github.com/Voog/design-anchorage/blob/master/components/template-styles.tpl#L56。