Image Gallery

An example image gallery page

Image Gallery Title

The alt text for the image

The image description

The alt text for the image

The image description

The alt text for the image

A title

The image description can be longer and written in markdown too.

If you want to describe your image in more detail.

  • Item 1
  • Item 2

Second Image Gallery Title

The alt text for the image

The image description

The alt text for the image

The image description

The alt text for the image

The image description

This is a page displaying a simple image gallery.

Start by creating a gallery data file using the below format, for example my_gallery.yml.

- title: 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
  • 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