Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Picture

The picture component can display an image with additional information.

Contents

  1. Component status
  2. Image sizes
Open this example in new tab

HTML 

<figure class="tna-picture" data-module="tna-picture">
  <div class="tna-picture__image-wrapper tna-background-tint">
    <picture>
      <img class="tna-picture__image" width="1996" height="1331" src="https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg" alt="The National Archives office in Kew, London" loading="lazy">
    </picture>
  </div>
  <figcaption class="tna-picture__caption">
    <p>This is a pretty image</p>
  </figcaption>
</figure>

Nunjucks

Nunjucks options
Primary options
Name Type Description
src string

Required.

alt string

Required.

width number

Required.

height number

Required.

sources array

See macro options for sources.
caption string
informationLabelOpen string
informationLabelClose string
informationItemHeadingLevel number

The heading level which represents an element from <h1> through to <h6> for each of the information items. Required if information is set.
information array

See macro options for information.
classes string

Classes to add to the picture.
attributes object

HTML attributes (for example data attributes) to add to the picture.
Options for sources
Name Type Description
src string

Required.

type string

Required.

media string
width number
height number
Options for information
Name Type Description
id string

Required.

A unique ID for the picture information item.
title string

Required.

body string

Required. 

{% from "nationalarchives/components/picture/macro.njk" import tnaPicture %}

{{ tnaPicture({
  src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
  alt: "The National Archives office in Kew, London",
  width: 1996,
  height: 1331,
  caption: "<p>This is a pretty image</p>",
  transcript: "<p>Lorem ipsum transcript</p>",
  translation: "<p>Lorem ipsum translation</p>"
}) }}

Component status

Phase
Official (ready to use in production)
Analytics integrated
Yes

Image sizes

Picture components need to show the entire image so they are free from aspect ratio restrictions.

Ensure the longest side of the image is no more than 900px.

Back to top