<div class="large_img">
<div class="large_img-wrapper">
<div class="large_img-img">
<picture class="image large">
<img src="/img/lava-2.jpg" alt="hot lava" />
</picture>
</div>
<div class="large_img-caption">
This is the caption
</div>
</div>
</div><!-- end large_img -->
<div class="large_img">
<div class="large_img-wrapper">
<div class="large_img-img">
{% block large_img_image %}
{% include "@images--large" %}
{% endblock large_img_image %}
</div>
{% if caption %}
<div class="large_img-caption">
{{ caption|raw }}
</div>
{% endif %}
</div>
</div><!-- end large_img -->
{
"img_src": "/img/lava-2.jpg",
"img_alt": "hot lava",
"body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"caption": "This is the caption"
}
.large_img {
position: relative;
margin-bottom: $space_and_half;
margin-top: $space_and_half;
@include media-breakpoint-up(md) {
width: 100%;
}
&-wrapper {
position: relative;
max-width: 100%;
width: max-content;
}
&-img {
overflow: hidden;
position: relative;
width: 100%;
max-width: 100%;
img {
max-width: 100%;
}
}
&-caption {
position: relative;
width: 100%;
background-color: $grey_darkest;
color: $white;
padding: $space_one_half;
font-size: .875rem;
p {
margin: 0;
}
}
}
Display large image with an optional caption.