University of Derby

Image Embed 

<section class="media-embed">
    <figure class="media-embed-fig">
        <img class="media-embed-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" alt="Scarlet honey eater bird" />
        <figcaption class="media-embed-caption">
            <span class="media-embed-caption-background">Scarlet honey eater bird</span>
        </figcaption>
    </figure>
</section>
 
<section class="media-embed">
    <figure class="media-embed-fig">
        <img class="media-embed-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="media-embed-caption">
            <span class="media-embed-caption-background">{{ caption }}</span>
        </figcaption>
        {% endif %}
    </figure>
</section>
 
{
  "alt": "Scarlet honey eater bird",
  "path": "/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg"
}
  • Content: 
    /* Given the shared behaviour the image embed shares the media-embed class */
  • URL: /components/raw/image-embed/image-embed.scss
  • Filesystem Path: components/components/image-embed/image-embed.scss
  • Size: 78 Bytes

Image Embed

An image, with optional caption, which sits alongside text blocks. 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

  • Optional caption
  • Optional srcset support

Properties

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

ResponsiveImage

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