The image pair component allows us to add images into an article. These images are not to act as links. Images have an optional caption. When only one image is available, this will span across the space for two.
Images appear in a landscape format. The aspect ratio for images where two are provided is approximately 6 (horizontal) to 4 (vertical), and 2 to 1 when only one is provided. Vertical cropping / horizontal stretching maintaining the aspect ratio is applied to ensure this. Consideration of these proportions should be taken when choosing images.
When placed within a page, the image pair component should be preceeded by a heading or paragraph content, and further paragraph content or another heading should follow this component.
Optionally captions can be added, this caption is shown as a label underneath the image, and also acts as the alt tag for the image. If set to not display, images will still have an alt tag but not display the caption.
The config consists of an array of two image items each with a src (image path) and a caption.
The second item can be ommitted resulting in a single image.
The ‘caption-show’ value can be set to true or false to determine whether captions are visible.
Note in the mark up that a class of uol-image-pair__image–single is added to the image when there is only one image.
'context': {
'images': [
{
'src': '/placeholders/campus/medium/23300.jpeg',
'caption': 'Caption one',
},
{
'src': '/placeholders/campus/medium/23305.jpeg',
'caption': 'Caption two',
},
],
'caption-show': true,
},
<div class="uol-image-pair">
{% for image in images %}
<figure class="uol-image-pair__container">
<img class="uol-image-pair__image {{ 'uol-image-pair__image--single' if images.length == 1 }}" src="{{ image.src }}" alt="{{ image.caption }}">
{% if captionShow %}
<figcaption class="uol-image-pair__caption">{{ image.caption }}</figcaption>
{% endif %}
</figure>
{% endfor %}
</div>
<div class="uol-image-pair">
<figure class="uol-image-pair__container">
<img class="uol-image-pair__image " src="/placeholders/campus/medium/23300.jpeg" alt="Caption one">
</figure>
<figure class="uol-image-pair__container">
<img class="uol-image-pair__image " src="/placeholders/campus/medium/23305.jpeg" alt="Caption two">
</figure>
</div>
.uol-image-pair {
display: flex;
column-gap: $spacing-4;
@include media(">=uol-media-l") {
column-gap: $spacing-5;
}
@include media(">=uol-media-xl") {
column-gap: $spacing-6;
}
.uol-image-pair__container {
flex: 50%;
margin: 0;
}
.uol-image-pair__image--single {
width: 100%;
aspect-ratio: 2 / 1;
object-fit: cover;
}
.uol-image-pair__image {
width: 100%;
display: block;
}
.uol-image-pair__caption {
@extend %text-size-caption;
color: $color-font--x-light;
margin-top: $spacing-2;
padding-top: 0;
}
}
{
"images": [
{
"src": "/placeholders/campus/medium/23300.jpeg",
"caption": "Caption one"
},
{
"src": "/placeholders/campus/medium/23305.jpeg",
"caption": "Caption two"
}
],
"captionShow": false
}