General image guidance is available on the image documentation page.
Featured images have a 2:1 aspect ratio (width:height). The advised dimensions for a featured image is 1100px x 550px.
CMS systems which render images to specific sizes (e.g. by utilising scripts which specify sizing parameters) should set the width and height parameters as per the above guidelines.
'context': {
'image_featured': {
'src': '/placeholders/ph-event-01.jpg',
'alt': 'Actors touching each other\'s faces',
'caption': 'Supporting caption'
}
}
{% if image_featured %}
<figure class="uol-featured-image">
<img
class="uol-featured-image__img"
src="{{ image_featured.src }}"
alt="{{ image_featured.alt | safe }}">
{% if image_featured.caption %}
<figcaption
class="uol-featured-image__caption">
{{ image_featured.caption | safe }}
</figcaption>
{% endif %}
</figure>
{% endif %}
<figure class="uol-featured-image">
<img class="uol-featured-image__img" src="/placeholders/ph-event-01.jpg" alt="Actors touching each other's faces">
</figure>
// Experiment - let SASS create the media queries...
$featured-image-bottom-margin: (
"xs": $spacing-6,
"l": $spacing-7
);
.uol-featured-image {
@each $key, $val in $featured-image-bottom-margin {
@include media(">=uol-media-#{$key}") {
margin-bottom: $val;
}
}
position: relative;
display: flex;
flex-direction: column;
// TODO: Remove IE11 hack
.no-csspositionsticky & {
display: block;
}
.uol-widget__content & {
margin-bottom: $spacing-4;
}
}
.uol-featured-image__img {
width: 100%;
height: auto;
}
.uol-featured-image__caption {
@extend .uol-typography-paragraph-small;
margin: 0;
padding: $spacing-2 0 0;
color: $color-font--x-light;
}
{
"image_featured": {
"src": "/placeholders/ph-event-01.jpg",
"alt": "Actors touching each other's faces"
}
}