Netlify + Decap CMS: Iterating over images array

Out of curiosity I stood up a quick test site, hosted by Netlify and using Decap CMS (formerly Netlify CMS).

Repo: https://github.com/jmooring/hosting-netlify-decap-cms
Live site: https://hosting-netlify-decap-cms.netlify.app/

And from what I can tell from the documentation, the allow_multiple option (default is true) on the image widget is only relevant when using an external media library.

Using the native/built-in image storage mechanism, you have to do something like this in your Decap CMS configuration file:

- label: Images
  name: images
  widget: list
  fields:
    - {name: path, label: Image, widget: image}
    - {name: alt, label: Alt, widget: string}

Which is actually pretty slick, allowing you to add things like alt, id, title, and class attributes to an img element, or a caption if you wanted to render figure elements instead, etc.

Decap CMS produces a content file like this:

title: Kittens
date: 2023-09-16T19:22:36.024Z
tags: 
  - kittens
  - cats
  - cute
images:
  - path: images/uploads/a.jpg
    alt: A kitten
  - path: images/uploads/b.jpg
    alt: Another kitten
  - path: images/uploads/c.jpg
    alt: Yet another kitten

And then you can render all of the images with:

{{ range .Params.images }}
  {{ $alt := or .alt "" }}
  {{ with resources.Get .path }}
    {{ with .Resize "200x webp" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $alt }}">
    {{ end }}
  {{ end }}
{{ end }}

This in another example of coding defensively. If the images parameter is not present in front matter, the code is skipped (range over nothing does nothing). If the path key is not present (unlikely in this setup) the code is skipped. And if the alt key isn’t present we explicity set it to an empty string.

Visit the repo (link above) to see the entire Decap CMS configuration file. Other than the list widget for images, I just copied and pasted from their examples.