{% 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 %}
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.
Each uploaded image generates automatically different possible sizes of the image maintaining its aspect ratio.{% 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 %}
"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 prsent:
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.
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 %}