0

I'm having some trouble with adding images to my blog articles on the Voog website builder. Basically, I'm trying to use the article's image on my blog page so that every listed article has its own specific background image.

The article's image URL is available as {{ article.image }}, but this always returns the original image file, which results in a longer loading time and doesn't take into account the size of the element, which in my case is quite small (500px).
I guess I could use the replace filter to manually change every file URL to make it use a specific suffix: {{ article.image | replace: '.jpg', '_block.jpg' }}, but this looks messy and I have to repeat it for every possible image extension.

Are there any better ways to achieve this?

Martin
  • 15
  • 4

1 Answers1

0

To get an image in specific size for article, you can use {{ article.image.for-width-500 }} See the example usage from Voog developers documentation here: http://www.voog.com/developers/markup/objects/image

However, both page.image and article.image are suggested for OG tags. For example: https://github.com/Voog/design-anchorage/blob/master/components/site-meta.tpl#L24.

So, for actual images on the site, if they are not strictly bound and kept same as Facebook OG images, you should use the background picker instead, which is basically an universal background image and color picking tool (http://www.voog.com/developers/scripting/javascripts/bgpicker).

A live example for this one is available in the Barcelona design (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.

A third example as well — here is a background image that adapts to various screen sizes, offering the best optimal image size that is currently suitable: https://github.com/Voog/design-anchorage/blob/master/components/template-styles.tpl#L56

mikkpr
  • 7
  • 3
Oliver Pulges
  • 111
  • 4