<div class="image-block image-block--full-bleed">
<div class="image-block-inner">
<picture class="image">
<div class="image-inner">
<span style="padding-bottom: 55.55555555555556%;" class="image-placeholder"></span>
<img src="/temp/hero-example.jpg" alt="">
</div>
<figcaption class="image-caption">This is an image caption</figcaption>
</picture>
</div>
</div>
<div class="image-block{% if imageBlockModifiers is defined and imageBlockModifiers|length %} image-block--{{ imageBlockModifiers|join(' image-block--') }}{% endif %}">
<div class="image-block-inner">
{% include '@image' with image only %}
</div>
</div>
{
"image": {
"url": "/temp/hero-example.jpg",
"width": 1440,
"height": 800,
"alt": "",
"contain": false,
"transparent": false,
"caption": "This is an image caption"
},
"imageBlockModifiers": [
"full-bleed"
]
}
Purpose: Image should be a Multiple Sources Image, so an editor could upload different ones for Desktop and Mobile.
Required: Yes
Recommendations: Desktop image aspect ratio should be close to 2x1; Mobile image aspect ratio should be close to 1x1,5
Purpose: Used to describe the image.
Required: No
Recommendations: Keep max to about 120 characters (including spaces)
Purpose: Image should be a Multiple Sources Image, so an editor could upload different ones for Desktop and Mobile.
Required: Yes
Recommendations: Desktop image aspect ratio should be close to 1,5x1; Mobile image aspect ratio should be close to 1x1,5
Purpose: Used to describe the image.
Required: No
Recommendations: Keep max to about 120 characters (including spaces)
Purpose: Used with one-column text blocks on Article pages.
Purpose: Used to describe the image.
Required: No
Recommendations: Keep max to about 120 characters (including spaces)