University of Derby

Full Width Image: Image with long 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. This caption has really, unreasonably long caption text to illustrate what would happen if there was an awful lot of text associated with an image.</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. This caption has really, unreasonably long caption text to illustrate what would happen if there was an awful lot of text associated with an image."
}
  • 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]