Day 021 - Frontmatter Arrays

30 Aug 2020 by Shane Robinson

At the end of this post I reference a project I'm working on that will go into detailed examples of how to build all the things I'm working on during this #100DaysOfCode project. For those already subscribed to my email list they received the secret link to that project currently in development.

I try to build with the end-user in mind. And while that is not always apparent, it does remain a priority.

And, there does have to be a bit of "learning" on the part of the end user and Content Editors when working in a static site system.

One of the ways to make it easier for Editors is to introduce patterns and ways to duplicate repetitive code/content when possible.

For example:

• Image Galleries
• Carousels / Image Sliders
• Products and Related Products
• Lists

Some elements, like Lists, are easy to format in Markdown. But items that require a lot of custom HTML, CSS, and Javascript, like Image Galleries, Carousels, and Products would be all but impossible for most Content Editors.

Enter: Frontmatter Arrays

Here's some partial Frontmatter from this page:

hero: carousel # options: carousel, graphic, video, split (text & image)
heroSettings:
  height:
    mobile: # options = 1/1 (default = full screen), 1/2, 1/3, 3/4, 9/10, h-48 (12rem, 192px), h-56 (14rem, 224px), h-64 (16rem, 256px)
    desktop: # leave blank to inherit "mobile" height (default = full screen)
  imagePath: /assets/images/2020/08/
  carousel: 
    - label: Slide 1
      image: 1.jpg
    - label: Slide 2
      image: 2.jpg
    - label: Slide 3
      image: 3.jpg

The important parts for today's work are the:

• hero: carousel
• heroSettings:
• imagePath: /assets/images/2020/08/
• carousel:

hero: carousel

This is going to tell the `base.njk` template that this page will have a `carousel` and to load the required CSS and Javascript that we need the carousel to work.

heroSettings:

This is an array of various settings like "height", default "imagePath", and a "carousel" setting.

imagePath:

This is the folder where we can find the images for this post. It's good to set this in a single place in case it changes. Then we just have to change it here and not at every image in the carousel.image values.

carousel:

This is a nested array that can contain a lot of different information for each of the "slides" in the carousel. We need to know the "image" for each slide. We also have a "lable" for each slide that could be used in a text overlay.

We could add as many settings for each slide as we need. But this is simple for the purpose of this exercise.

So now all a Content Editor has to do is "label" each image, provide the "image" name, and add as many additional images as they want in the slider.