Image Gallery

Page Component

Contents

You can display a gallery of images on a page. It allows you to show a small version and click on it to enlarge the image.

View the image gallery example page

Start by creating a gallery data file using the below format, for example my_gallery.yml. The image (link) will display on the page and when you click on the image, it will display the large_link image in a modal window.

- title: Image Gallery Title
  images:
    - link: https://via.placeholder.com/800x450
      large_link: https://via.placeholder.com/1200x675
      alt: The alt text for the image
      description: |-
        The image description can be written in **markdown** if required
      ratio: is-16by9
    - link: https://via.placeholder.com/800x600
      large_link: https://via.placeholder.com/1200x900
      alt: The alt text for the image
      description: The image description
      ratio: is-4by3
  • If a ratio is not provided it will default to 16 by 9. Use Bulma image classes to define the image ratio required.
  • The description can be plain text or it can be markdown if required.
  • The alt will be used as the images alt text.

Multiple galleries

If you want multiple image galleries on the same page then create additional sections in your yaml file.

- title: First Image Gallery Title
  images:
    - link: https://via.placeholder.com/800x450
      alt: The alt text for the image
      description: |-
        The image description can be written in **markdown** if required
      ratio: is-16by9
    - link: https://via.placeholder.com/800x600
      alt: The alt text for the image
      description: The image description
      ratio: is-4by3

- title: Second Image Gallery Title
  images:
    - link: https://via.placeholder.com/800x450
      alt: The alt text for the image
      description: |-
        The image description can be written in **markdown** if required
      ratio: is-16by9
    - link: https://via.placeholder.com/800x600
      alt: The alt text for the image
      description: The image description
      ratio: is-4by3

In your pages front matter add a gallery with the datafiles filename without the extension.

layout: page
title: My Image Gallery
gallery: my_gallery