<section class="media-embed">
<figure class="media-embed-fig">
<img class="media-embed-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" srcset="../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_320.jpg 320w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_517.jpg 517w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_685.jpg 685w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_767.jpg 767w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_694.jpg 694w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_720.jpg 720w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_480.jpg 480w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_810.jpg 810w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1077.jpg 1077w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1274.jpg 1274w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1461.jpg 1461w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1643.jpg 1643w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1700.jpg 1700w, ../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg"
alt="Scarlet honey eater bird" />
</figure>
</section>
<section class="media-embed">
<figure class="media-embed-fig">
<img class="media-embed-img" src="{{ path | path }}"{% if srcset %} srcset="{% for src in srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ path | path }}"{% endif %} alt="{{ alt }}" />
{% if caption %}
<figcaption class="media-embed-caption">
<span class="media-embed-caption-background">{{ caption }}</span>
</figcaption>
{% endif %}
</figure>
</section>
{
"alt": "Scarlet honey eater bird",
"path": "/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg",
"srcset": [
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_320.jpg",
"width": 320
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_517.jpg",
"width": 517
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_685.jpg",
"width": 685
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_767.jpg",
"width": 767
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg",
"width": 538
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_694.jpg",
"width": 694
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg",
"width": 596
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_720.jpg",
"width": 720
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_480.jpg",
"width": 480
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_810.jpg",
"width": 810
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1077.jpg",
"width": 1077
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1274.jpg",
"width": 1274
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1461.jpg",
"width": 1461
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1643.jpg",
"width": 1643
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1700.jpg",
"width": 1700
}
]
}
/* Given the shared behaviour the image embed shares the media-embed class */
An image, with optional caption, which sits alongside text blocks. Does not crop, height is flexible and respects the original image ratio.
Responsive images are supported through use of the srcset property, which combine an image path and a target screen width at which the image should be displayed.