General image guidance is available on image documentation page
People profile images should be in JPG format.
News tiles images have a 1:1 (width:height) aspect ratio. The advised dimension for a profile image is 1000px x 1000px.
The image should have the subject centred, as the image will be displayed as a circle removing corners from the square image.
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.
Alternative descriptions for this image are not required in the configuration, the alternate name (for assistive technology is) “Portrait of (Person name)”.
{% if profile_image.src %}
<div class="uol-profile-image">
<div class="uol-profile-image__img"
role="img"
style="background-image: url('{{ profile_image.src | path }}');"
aria-label="Portrait of {{ profile_image.alt }}"></div>
</div>
{% endif %}
<div class="uol-profile-image">
<div class="uol-profile-image__img" role="img" style="background-image: url('../../placeholders/ph-profile-staff-01.jpg');" aria-label="Portrait of Joe bloggs"></div>
</div>
.uol-profile-image {
position: relative;
}
.uol-profile-image__img {
position: relative;
width: 100%;
padding-bottom: 100%;
border-radius: 50%;
background: 50% / cover;
@media (-ms-high-contrast: active), (forced-colors: active) {
-ms-high-contrast-adjust: none;
forced-color-adjust: none;
}
&::before,
&::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: inherit;
}
&::before {
background: 50% / cover;
background-image: inherit;
}
&::after {
box-shadow: inset 0 2px 4px rgba($color-black, 0.2);
}
}
{
"profile_image": {
"src": "/placeholders/ph-profile-staff-01.jpg",
"alt": "Joe bloggs"
}
}