Image

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

content_type
id
for-width-* and for-height-*
height
thumbnail
schemeless_url
sizes
url
url_http
url_https
width

content_type

Returns content type of the image file.

id

The unique ID of the image asset.

url

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

url_http

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

url_https

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

schemeless_url

Returns full URL to the image file without protocol part.

sizes

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.

thumbnail

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 %}

width

Return width in pixels for current image.

height

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%;">
  </picture>
{% endif %}