Gallery

The gallery component is useful to display a set of large photos. For each photo, you must provide the following information:

  • the URL of the full-size version (in the href attribute of the anchor element),
  • the dimensions of the full-size version (in the data-size attribute of the anchor element),
  • the URL of the thumbnail version (in the src attribute of the image element),
  • a caption and/or text alternative ( figcaption element or alt attribute).

Captions and text alternatives have different purposes, make sure you use them the right way.

Example:
Example:
Example:

Captions

You may, and should provide a caption for every image with the figcaption element.

  • By default, the caption is shown only in the viewer (cf. first image below).
  • If you don't specify a caption, make sure to add a descriptive alt text to the img element for accessibility purposes.
  • To show it in the gallery as well, use class image-gallery__caption (cf. second image).
  • If you need to show a different caption in the gallery than in the viewer, leave the figcaption as is and add a paragraph before it with class image-gallery__caption (cf. third image).

Captions in the gallery should be concise and consistent - either provide one for every image, or don't provide any at all.

Example: