Introduction
This tutorial is the first in a 2 part series on creating image galleries using the Grav CMS. It is the system that have used it make my Photography on Wheels website.
In this part of the tutorial I will just outline basic media handling and three possible strategies to use. The next part of the tutorial will cover making a theme and gallery using Grav.
Background
Grav is a flat file Content Management System (CMS) written in PHP. A flat file CMS is one that stores the page and configuration in files rather than using a database.
Grav is based on the Symfony framework and uses a combination of Markdown and YML files to store configuration and page data. As it is based on Symfony uses the Twig templating system.
Before continuing you should read the "Basics" and "Content" sections of the Grav documentation. This will give you an introduction to using the system.
Media handling
Grav has sophisticated handling of media and collections.
Images can be scaled, cropped or filtered using twig templates or in Markdown. They can also have metadata associated with them like titles, alt descriptions, filters or tags. All images should have at least a title and alt description for accessibility. The metadata is stored in a YML file with image (as described in the documentation).
Collections are another important part of Grav. They allow for sets of objects to be defined and used. An example is the page collection that contains all the pages or sub-pages on the site. Each page can also have a media collection and custom collections defined in header of the page markdown file. It is the media and custom collections that are used to make the gallery pages.
Gallery strategies
There are 3 main strategies for handling a gallery. For all of these you will need:
- Images (obviously)
- Metadata files (for titles /accessibility)
- Page markdown file (page content and type)
- YML configuration
- Gallery capable theme
Automatic gallery page
This is the simplest type of gallery page. All the images and metadata files for the gallery are stored in the page folder and are automatically added to the gallery. The page mark-up just needs a small amount of configuration in the YML header. The configuration tells the gallery template to search for all media in the page folder.
There are instructions on the Grav documentation site for making this type of gallery.
Advantages
- Easy to build
- Easiest to add images
Disadvantages
- Cannot define the order of images on the page
- Using an image on more than 1 gallery requires copies of the image and metadata
- Any media in the page folder will be included in the gallery
Ordered Gallery page
With this type of gallery the images are still stored with the metadata in the page folder. The difference is that there is an ordered collection of images to be shown. The list of the images is in the YML header of the page markdown file.
This list of images allows the order to be changed but needs to be updated when images are added.
This type of gallery is the least useful. It is not much harder to make a centralised image store and it provides many advantages.
Advantages
- Images can be in a specified order
- The gallery can include a selection of the media in the folder
Disadvantages
- Images have to be added to the YML header of the page markdown
- Using an image on more than 1 gallery requires copies of the image and metadata
Gallery with centralised storage
The final type of gallery shows media from centralised media and metadata storage. The storage is in a special folder in the pages folder. The media can be in sub folders of the main media repository. In this type of gallery none of the gallery images are in the page folder.
As with the previous type of gallery you need to define a list of images to be displayed in the gallery. The YML header can also include subfolder configuration. Images in the list are found in the same folder in the image storage along with the associated metadata and displayed on the gallery. Site wide configuration is also required to define the location of the image storage.
Advantages
- Images can be in a specified order.
- Centralised storage of images and metadata
- No duplication of images so re-use of images is easier
- Makes adding a galleries page easier
Disadvantages
- Most difficult initial set-up
- Images have to be added to the header of the page markdown
- More complex theme files
Summary
As you can see each of these gallery types have their use.
The simple automatic gallery is the best if you don't re-use images and don't care about the order of images. It is also the easiest for less experienced content authors to understand. As the Grav documentation describes a simplified way to build this type of gallery I won't cover it in the next tutorial.
A gallery with centralised storage is the best option if you care about the order of images or re-use images. I will cover creating this type of gallery in more detail in part 2 of the tutorial.