Assets
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.
Create an assets data file
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: Assets 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 Assets 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 Assets 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
Displaying the gallery
In your pages front matter add a gallery with the datafiles filename without the extension.
layout: page
title: My Assets
gallery: my_gallery