Images can help to illustrate your points and pace your story. Lapis provides various image content blocks, including grid, carousel, and juxtaposed image galleries.

Single image

Edit image caption

Click on the image caption under your image to edit it. Adding image captions can improve understanding for readers that are unable to see the image.

Add alternate text

Click the pencil icon at the bottom right of the image and type in alternate text.

✨  Including alternate text allows screen reader users to understand the images in context of your story. Adding alt text will also improve your story's search-engine optimisation (SEO).

Image gallery

Add an image gallery

1. To add an image gallery, add a new content block and select Image gallery.
2. Select Grid or Carousel from Image gallery in the drop-down menu.
3. Upload images.

Style an image gallery

1. To style an image gallery, click the settings icon at the top right of the gallery to open the ‘Customise settings’ menu.
2. In the 'Customise settings' menu, you can
   1. change the size of the gallery.
      • Contained: The image gallery will be the same width as the text content block width.
      • Full-width: The image gallery will span the width of the browser.
      • Custom: Set your preferred width and alignment for the image gallery.
   2. change the format of the gallery.
      • Format: Switch between a grid or a carousel format.
      • No. of slides: Set the number of images in your image gallery.
      • Style of arrows: Choose your preferred style of navigation arrows.

✨  To add alt text, replace images, or customise the individual image on the image gallery, click the pencil icon on the individual images.

Juxtapose

Juxtaposing two contrasting elements can help to highlight key points.

Add juxtaposed images

1. To add juxtaposed images, add a new content block and select Juxtapose images.
2. Upload images.

Edit juxtaposed images

1. Click the settings icon at the top right of the block.
2. In the 'Customise settings' menu, you can
   1. replace existing images.
   2. choose between a vertical or horizontal slider.
   3. change content area size.
      • Contained: The image gallery will be the same width as the text content block width.
      • Full-width: The image gallery will span the width of the browser.
      • Custom: Set your preferred width and alignment for the image gallery.
   4. change the image settings, including image fit and position.
   5. add alt text.

Next, learn about multimedia content blocks.

Lapis is built by Kontinentalist↗, a data storytelling studio in Singapore.