Component

Image meta

Displays an image with the associated metadata and possible actions

Metadata contains alt text, image caption and image credit. Actions can be choose, edit and remove. The component is dependent on the govuk-frontend grid system.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Larry the cat
Alt text:
Larry the cat
Caption:
Larry, Chief Mouser to the Cabinet Office
Credit:
His Majesty's Government

How to call this component

<%= render "components/image_with_metadata", {
  src: "https://assets.publishing.service.gov.uk/government/assets/history/buildings/larry-the-cat-a47549e08bdbc6cd0e3e042eea943f65b7a4590d95642586e51acb44bb2dcea2.jpg",
  alt_text: "Larry the cat",
  metadata_items: [
    {
      field: "Alt text",
      value: "Larry the cat"
    },
    {
      field: "Caption",
      value: "Larry, Chief Mouser to the Cabinet Office"
    },
    {
      field: "Credit",
      value: "His Majesty's Government"
    }
  ]
} %>

Accessibility acceptance criteria

Images in this component must:

  • have alt text

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

With actions (preview) 

<%= render "components/image_with_metadata", {
  src: "https://assets.publishing.service.gov.uk/government/assets/history/buildings/larry-the-cat-a47549e08bdbc6cd0e3e042eea943f65b7a4590d95642586e51acb44bb2dcea2.jpg",
  alt_text: "Larry the cat",
  actions: [
    sanitize("<a class=\"govuk-link\" href=\"#\">Edit image</a>"),
    sanitize("<a class=\"govuk-link\" href=\"#\">Delete image</a>")
  ]
} %>

With (preview)

Larry the cat
Alt text:
Larry the cat
Caption:
Larry, Chief Mouser to the Cabinet Office
Credit:
His Majesty's Government
<%= render "components/image_with_metadata", {
  id: "my-image",
  src: "https://assets.publishing.service.gov.uk/government/assets/history/buildings/larry-the-cat-a47549e08bdbc6cd0e3e042eea943f65b7a4590d95642586e51acb44bb2dcea2.jpg",
  alt_text: "Larry the cat",
  metadata_items: [
    {
      field: "Alt text",
      value: "Larry the cat"
    },
    {
      field: "Caption",
      value: "Larry, Chief Mouser to the Cabinet Office"
    },
    {
      field: "Credit",
      value: "His Majesty's Government"
    }
  ]
} %>