Using Netlify CMS with Hugo - creating posts with galleries

问题

I'm new to both Hugo and Netlify, so it's possible I'm simply doing this wrong.

I've successfully built and deployed a site with galleries, using Hugo, the Galleria plugin, and deploying to Netlify This has all worked. However, I want to try using the Netlify CMS, and am struggling to set it up to handle the gallery feature (it's doing fine for just writing a text post)

I'm not sure if this is a limitation of Netlify CMS, or if I'm doing galleries in a way that isn't suited to static sites.

To implement the gallery in Hugo, I am doing the following in the front matter of each post:

+++
date = "2017-02-13T23:17:09+01:00"
summary = "In which I fail to RTFM, visit a Lamasery, and eat a lot of fruit."
tags = []
title = "China 2017: Day 11"

[[galleria]]
imgSrc = "../images/china/11/Lama-Temple.JPG"
imgTitle = "Hall In The Lama Temple"
imgDesc = "One of the main halls of the Lama Temple."

[[galleria]]
imgSrc = "../images/china/11/Octagonal-Hall.JPG"
imgTitle = "Octagonal Hall"
imgDesc = "An octagonal building just inside the entrance of the Lama Temple"

.
.
.
+++

Then in the layout page:

  {{ if isset .Params "galleria" }}
  <div class="galleria">
  {{ range .Params.galleria}}
  <img src="{{ .imgSrc }}" alt="{{ .imgTitle }}" data-title="{{ .imgTitle }}" data-description="{{ .imgDesc }}">
  {{ end }}
  </div>
  {{ end }}

The on the Netlify CMS setup I tried adding an Object widget:

 -  name: "galleria"
         label: "Gallery" 
         widget: "object"
         optional: true
         fields:
          - {label: "Title", name: "imgTitle", widget: "string"}
          - {label: "Gallery Image", name: "imgSrc", widget: "image"}
          - {label: "Description", name: "imgDesc", widget: "string"}

I'm left with two problems:

(i) The object shows up, but of course only once. How would I set it up to allow me to enter as many images as I want?

(ii) On build, I'm getting an error: ERROR 2017/05/28 22:37:20 Error while rendering "page": template: _default/single.html:23:15: executing "_default/single.html" at <.imgSrc>: can't evaluate field imgSrc in type interface {}

So it seems I'm doing something wrong even trying to get one image (and associated data) in to a post.

回答1:

Putting this here in case other people get stuck on this.

After asking around, and thanks to the lovely people in the Netlify Gitter channel:

I should have used a list widget, rather than an object. The YAML now looks like this:

-  name: "galleria"
         label: "Gallery" 
         widget: "list"
         optional: true
         fields:
          - {label: "Title", name: "imgTitle", widget: "string"}
          - {label: "Gallery Image", name: "imgSrc", widget: "image"}
          - {label: "Description", name: "imgDesc", widget: "string"}

This has removed the build error, and provides me a widget in the CMS editor where I can add as many (or few) images as I wish.

I have now hit a follow up problem, where posts created with the CMS are created correctly, appear in the right folders in the repo, but 404 . . .

来源：https://stackoverflow.com/questions/44278313/using-netlify-cms-with-hugo-creating-posts-with-galleries

标签

gallery

hugo

netlify

netlify-cms