University of Derby

Full Width Image: Image with caption 

<section class="full-width-image">
    <figure class="full-width-image-fig">
        <img class="full-width-image-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" alt="Scarlet honey eater bird" />
        <figcaption class="full-width-image-caption">
            <span class="full-width-image-caption-background">Scarlet honey eater bird</span>
        </figcaption>
    </figure>
</section>
 
<section class="full-width-image">
    <figure class="full-width-image-fig">
        <img class="full-width-image-img" src="{{ path | path }}"{% if srcset %} srcset="{% for src in srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ path | path }}"{% endif %} alt="{{ alt }}" />
        {% if caption %}
        <figcaption class="full-width-image-caption">
            <span class="full-width-image-caption-background">{{ caption }}</span>
        </figcaption>
        {% endif %}
    </figure>
</section>
 
{
  "alt": "Scarlet honey eater bird",
  "path": "/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg",
  "caption": "Scarlet honey eater bird"
}
  • Content: 
    .full-width-image {
    @include full-bleed;
    @include margin-large;

    position: relative;
    min-height: 1px; // for IE11 Flexbox bug: https://github.com/philipwalton/flexbugs/issues/75
    font-size: 0;

    @include for-phone-only {
        @include margin-medium;
    }

    &-fig {
        margin: 0;
    }

    &-img {
        max-width: 100%;
    }

    &-caption {
        @include full-bleed-inset;
        @include small-body-font;

        position: absolute;
        bottom: 0;

        @include for-tablet-landscape-up {
            max-width: 50%;
        }

        @include for-phone-only {
            position: relative;
            bottom: initial;
            max-width: initial;
        }

        &-background {
            display: inline-block;
            margin-bottom: -1px;
            border-bottom: 1px solid $white;
            background: $white;
            padding: .5em 1em;
            color: $primary-blue;

            @include for-phone-only {
                margin: 0;
                border-bottom: 0;
                padding: .5em 0;
            }
        }
    }
}
  • URL: /components/raw/full-width-image/full-width-image.scss
  • Filesystem Path: components/components/full-width-image/full-width-image.scss
  • Size: 1.1 KB

Full Width Image

An image, with optional caption, which fills the full width of the viewport. Does not crop, height is flexible and respects the original image ratio.

Responsive images are supported through use of the srcset property, which combine an image path and a target screen width at which the image should be displayed.

Key Features

  • Full bleed image
  • Optional caption
  • Optional srcset support

Properties

  • path [required, string(path)]
  • alt [required, string]
  • srcset [optional, Array of ResponsiveImage]
  • caption [optional, string|html]

ResponsiveImage

  • image [required, string(path)]
  • width [required, number]