We use cookies on this site to enhance your user experience

By clicking the Accept button, you agree to us doing so. More info on our cookie policy

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