Represents single image object and provides access to its thumbnail counterparts. Images are attached to pages and articles 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 %}

Properties of Image Object


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": "//",
    "height": 3200,
    "width": 4800
    "url": "//",
    "height": 1365,
    "width": 2048
    "url": "//",
    "height": 853,
    "width": 1280
    "url": "//",
    "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.


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