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).

Gallery

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).