<div class="image_w_text right fiftyW wrap">
<div class="image_w_text-image">
<div class="image_w_text-img">
<picture class="image large">
<img src="/img/lava-2.jpg" alt="hot lava" />
</picture>
<div class="image_w_text-caption">
This is the caption
</div>
</div>
</div><!-- end image_w_text-image -->
<div class="image_w_text-txt">
Donec interdum molestie odio sed consectetur. In orci metus, semper vitae tincidunt in, bibendum ut dui. Morbi hendrerit, ante non elementum vehicula, tellus metus varius leo, at aliquet erat leo vel lacus. Proin dapibus metus in efficitur efficitur. Aenean a est vitae elit porta ullamcorper non nec ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec malesuada, lacus ac euismod condimentum, tortor lectus aliquet dolor, eget porta mauris metus sit amet arcu. Nam efficitur auctor viverra. Vivamus dolor tortor, malesuada id massa a, ornare aliquet ligula. Nunc sed risus dictum, congue tortor sed, pulvinar purus. Cras sit amet erat a nisi volutpat lobortis eget sed leo. Nunc semper lectus luctus nisl faucibus tincidunt. Maecenas vehicula volutpat enim, sed tempus ipsum. Maecenas sagittis tellus vitae erat posuere blandit eu vel nunc. In a justo rhoncus, sodales est at, dictum diam. Aliquam quis orci faucibus, gravida nisi et, aliquet ex. In a porttitor nisi, eu mattis neque. Curabitur et lectus sit amet est sagittis euismod. Aenean pharetra nunc risus, id iaculis erat luctus ut. Ut commodo, erat eleifend elementum ultricies, dolor mi aliquam tortor, vitae dapibus quam risus vitae ipsum. Nunc in nulla velit. Donec interdum molestie odio sed consectetur. In orci metus, semper vitae tincidunt in, bibendum ut dui. Morbi hendrerit, ante non elementum vehicula, tellus metus varius leo, at aliquet erat leo vel lacus. Proin dapibus metus in efficitur efficitur. Aenean a est vitae elit porta ullamcorper non nec ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec malesuada, lacus ac euismod condimentum, tortor lectus aliquet dolor, eget porta mauris metus sit amet arcu. Nam efficitur auctor viverra. Vivamus dolor tortor, malesuada id massa a, ornare aliquet ligula. Nunc sed risus dictum, congue tortor sed, pulvinar purus. Cras sit amet erat a nisi volutpat lobortis eget sed leo. Nunc semper lectus luctus nisl faucibus tincidunt. Maecenas vehicula volutpat enim, sed tempus ipsum. Maecenas sagittis tellus vitae erat posuere blandit eu vel nunc. In a justo rhoncus, sodales est at, dictum diam. Aliquam quis orci faucibus, gravida nisi et, aliquet ex. In a porttitor nisi, eu mattis neque. Curabitur et lectus sit amet est sagittis euismod. Aenean pharetra nunc risus, id iaculis erat luctus ut. Ut commodo, erat eleifend elementum ultricies, dolor mi aliquam tortor, vitae dapibus quam risus vitae ipsum. Nunc in nulla velit.
</div><!-- end image_w_text-txt -->
</div><!-- end image_w_text -->
<div class="image_w_text {{ align_text }} {{ img_size }} {% if wrap %}wrap{% endif %}">
<div class="image_w_text-image">
<div class="image_w_text-img">
{% block image_w_text_img %}
{% include "@images--large" %}
{% endblock image_w_text_img %}
{% if caption %}
<div class="image_w_text-caption">
{% if (caption) %}
{{ caption|raw }}
{% endif %}
</div>
{% endif %}
</div>
</div><!-- end image_w_text-image -->
<div class="image_w_text-txt">
{% block image_w_text_txt %}
{{ body_content }}
{% endblock image_w_text_txt %}
</div><!-- end image_w_text-txt -->
</div><!-- end image_w_text -->
{
"align_text": "right",
"img_src": "/img/lava-2.jpg",
"img_alt": "hot lava",
"body_content": "Donec interdum molestie odio sed consectetur. In orci metus, semper vitae tincidunt in, bibendum ut dui. Morbi hendrerit, ante non elementum vehicula, tellus metus varius leo, at aliquet erat leo vel lacus. Proin dapibus metus in efficitur efficitur. Aenean a est vitae elit porta ullamcorper non nec ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec malesuada, lacus ac euismod condimentum, tortor lectus aliquet dolor, eget porta mauris metus sit amet arcu. Nam efficitur auctor viverra. Vivamus dolor tortor, malesuada id massa a, ornare aliquet ligula. Nunc sed risus dictum, congue tortor sed, pulvinar purus. Cras sit amet erat a nisi volutpat lobortis eget sed leo. Nunc semper lectus luctus nisl faucibus tincidunt. Maecenas vehicula volutpat enim, sed tempus ipsum. Maecenas sagittis tellus vitae erat posuere blandit eu vel nunc. In a justo rhoncus, sodales est at, dictum diam. Aliquam quis orci faucibus, gravida nisi et, aliquet ex. In a porttitor nisi, eu mattis neque. Curabitur et lectus sit amet est sagittis euismod. Aenean pharetra nunc risus, id iaculis erat luctus ut. Ut commodo, erat eleifend elementum ultricies, dolor mi aliquam tortor, vitae dapibus quam risus vitae ipsum. Nunc in nulla velit. Donec interdum molestie odio sed consectetur. In orci metus, semper vitae tincidunt in, bibendum ut dui. Morbi hendrerit, ante non elementum vehicula, tellus metus varius leo, at aliquet erat leo vel lacus. Proin dapibus metus in efficitur efficitur. Aenean a est vitae elit porta ullamcorper non nec ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec malesuada, lacus ac euismod condimentum, tortor lectus aliquet dolor, eget porta mauris metus sit amet arcu. Nam efficitur auctor viverra. Vivamus dolor tortor, malesuada id massa a, ornare aliquet ligula. Nunc sed risus dictum, congue tortor sed, pulvinar purus. Cras sit amet erat a nisi volutpat lobortis eget sed leo. Nunc semper lectus luctus nisl faucibus tincidunt. Maecenas vehicula volutpat enim, sed tempus ipsum. Maecenas sagittis tellus vitae erat posuere blandit eu vel nunc. In a justo rhoncus, sodales est at, dictum diam. Aliquam quis orci faucibus, gravida nisi et, aliquet ex. In a porttitor nisi, eu mattis neque. Curabitur et lectus sit amet est sagittis euismod. Aenean pharetra nunc risus, id iaculis erat luctus ut. Ut commodo, erat eleifend elementum ultricies, dolor mi aliquam tortor, vitae dapibus quam risus vitae ipsum. Nunc in nulla velit.",
"caption": "This is the caption",
"img_size": "fiftyW",
"wrap": true
}
.image_w_text {
margin-bottom: $space_and_half;
margin-top: $space_and_half;
&-img {
overflow: hidden;
position: relative;
.image_w_text-caption {
position: relative;
width: 100%;
background-color: $grey_darkest;
color: $white;
padding: $space_one_half;
font-size: .875rem;
p {
margin: 0;
}
}
img {
width: 100%;
}
}
&.left {
.image_w_text-image {
float: right;
margin: 0 0 $spacer $spacer;
// @include media-breakpoint-down(sm) {
// margin: $spacer 0;
// float: unset;
// max-width: unset !important;
// }
}
}
&.right {
.image_w_text-image {
float: left;
margin: 0 $spacer $spacer 0;
// @include media-breakpoint-down(sm) {
// margin: $spacer 0;
// float: unset;
// max-width: unset !important;
// }
}
}
&.fifteenW {
.image_w_text-image {
max-width: 15vw;
}
}
&.twentyfiveW {
.image_w_text-image {
max-width: 25vw;
}
}
&.fiftyW {
.image_w_text-image {
max-width: 50vw;
}
}
&.sixtyW {
.image_w_text-image {
max-width: 60vw;
}
}
&:not(.wrap) {
@include media-breakpoint-up(sm) {
display: flex;
align-items: start;
justify-content: flex-start;
& > * {
flex: 1;
}
&.left {
flex-direction: row-reverse;
}
}
.image_w_text-image {
float: none;
width: 100%;
@include media-breakpoint-down(xs) {
max-width: 100%;
}
}
}
}
Display image in the text. The image will take 50% of the width.