Represents a single image object and provides access to its thumbnail counterparts. Images are attached to pages, articles and product and menu items with data. Image may have additional optimized size variants.

The image is defined by user from page/article settings menu:

Usage example:

{% if page.image %}
  <meta property="og:image" content="{{ page.image.url }}">
  <meta property="og:image:type" content="{{ page.image.content_type }}">
  <meta property="og:image:width" content="{{ page.image.width }}">
  <meta property="og:image:height" content="{{ page.image.height }}">  
{% endif %}

Available properties


Returns content type of the image file.


The unique ID of the image asset.


Returns full URL (with HTTP protocol) to the image file.


Returns full URL (with HTTP protocol) to the image file - alias for url.


Returns full URL (with HTTPS protocol) to the image file.


Returns full URL to the image file without protocol part.


Returns an array of image size variants sorted by width.

{% for image in page.image.sizes %}
  <meta property="og:image" content="{{ image.url }}">
  <meta property="og:image:type" content="{{ image.content_type }}">
  <meta property="og:image:width" content="{{ image.width }}">
  <meta property="og:image:height" content="{{ image.height }}">
{% endfor %}

Each uploaded image generates automatically different possible sizes of the image maintaining its aspect ratio.

The possible image sizes are:

  • original - the file you uploaded
  • 2048px from the longer side (with "_huge" suffix)
  • 1280px from the longer side (with "_large" suffix)
  • 600px from the longer side (with "_block" suffix)

    For example if user uploads image named "picture_of_me.jpg" with original size of 4800x3200, the image sizes array looks like this:

"page.image.sizes": [
    "url": "//media.voog.com/0000/0036/2450/photos/picture-of-me.jpg",
    "height": 3200,
    "width": 4800
    "url": "//media.voog.com/0000/0036/2450/photos/picture-of-me_huge.jpg",
    "height": 1365,
    "width": 2048
    "url": "//media.voog.com/0000/0036/2450/photos/picture-of-me_large.jpg",
    "height": 853,
    "width": 1280
    "url": "//media.voog.com/0000/0036/2450/photos/picture-of-me_block.jpg",
    "height": 400,
    "width": 600

Only lower variants of the image are generated. For example if original image longer side is less than (or equal to) 2048px, only '_large' and '_medium' are generated in addition for original image.


Returns thumbnail object for the image file smallest size (see sizes). Available attributes when present: content_type, height, schemeless_url, url, url_http, url_https and width. Example usage:

{% if product.image.thumbnail %}
  <img src="{{ product.image.thumbnail.schemeless_url }}">
{% endfor %}


Return width in pixels for current image.


Return height in pixels for current image.

for-width-* and for-height-*

These methods return best image variant for desired size, i.e. {{ page.image.for-width-1200 }} will return image variant that's closest to 1200 pixels in width. Example usage:

{% if article.image %}
  <picture title="" style="position: absolute; display: block; max-width: none; width: auto; height: 100%; left: 0%; top: 0px;">
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source sizes="315px" srcset="{{ article.image.for-width-1024.url }} 1024w, {{ article.image.for-width-600.url }} 600w">
    <!--[if IE 9]></video><![endif]-->
    <img src="{{ article.image.for-width-600.url }}" style="position: absolute; max-width: none; width: auto; height: 100%;">
{% endif %}