University of Leeds Design System v1.0.18.1

Featured Image: With Caption

Image guidance

General image guidance is available on the image documentation page.

Featured image guidance for content editors

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.

Configuration

Context guidance

  • ‘src’ - relative path to image (Required)
  • ‘alt’ - descriptive text (Required)
  • ‘caption’ - image caption (Optional)

Context example

'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">

    <figcaption class="uol-featured-image__caption">
        Image caption. May be used for &copy; notices
    </figcaption>

</figure>
  • Content: 
    // 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;
  }
  • URL: /components/raw/uol-image-featured/_featured-image.scss
  • Filesystem Path: src/library/02-components/images/featured-image/_featured-image.scss
  • Size: 729 Bytes 
{
  "image_featured": {
    "src": "/placeholders/ph-event-01.jpg",
    "alt": "Actors touching each other's faces",
    "caption": "Image caption. May be used for &copy; notices"
  }
}