List of images for footer

Hi,

I want users to be able to upload images that will be shown in the site footer. I’m trying to configure config.yml to store a list of these images. This works:

  • name: “supporters”
    label: “Supporters”
    editor:
    preview: false
    create: true
    fields:
    • { label: “Name”, name: “supporter”, widget: “string” }
    • { label: “Logo”, name: “logo”, widget: “image” }
      folder: “themes/vex-hugo/layouts/partials/footer_logos”

and the supporter_logos folder has md files created with the correct front matter. But how would I get the images into my footer since readDir only gives me FileInfo objects. How would I access the front matter variables? Seems like this should be data, so I’ve tried storing in data as yml:

  • name: “supporters”
    label: “Supporters”
    files:
    • label: “Supporter Logos”
      name: “supporters”
      file: “data/en/supporter_logos.yml”
      widget: “list”
      allow_add: “true”
      fields:
      • { label: “Logo”, name: “logo”, widget: “image” }

But this will only give me a single entry with no option for adding more. Is there a way to do this?
What is the best way to do this?

You’d probably get better help and faster responses regarding this on Hugo’s forums (discourse.gohugo.io) since there are a lot of skilled people who have an amazing knowledge about this application.

Thanks, I’m about to post there. Just thought the bits around config.yml might be off-scope there.

Oh, it’s the config for Netlify CMS? I have never used it personally, so had no idea. Yeah, then it might be difficult to get help there. But you can keep it posted there too. Till then if someone here has got experience with this kind of a setup, they can help.

Another place to look for help is in the CMS maintainers chat - they can guide you as to whether this is a bug or feature request, for instance:

I’m with @hrishikesh that the hugo community may/may not be able to answer. Certainly we are friends, but many there do not use Netlify and will probably push you back towards here…

Either way, I’ll be sure to post a complete answer here in the end

I figured out the best way to do this. It was to store the list of supporter logo in a yml file within the data folder by adding a section to the config.yml:

  • name: “supporters”
    label: “Supporters”
    create: true
    files:
    • label: “Supporter Logos”
      name: “logos”
      file: “data/en/supporters.yml”
      fields:
      • { label: “Title”, name: “title”, widget: “string” }
      • name: items
        label: Supporter
        widget: list
        fields:
        • { label: “name”, name: “name”, widget: “string” }
        • { label: “logo”, name: “logo”, widget: “image” }

Then, in the footer (or anywhere) it’s easy to access that data by declaring a variable:
{{ $data := index .Site.Data .Site.Language.Lang }}
Then loop through them with e.g:

    {{ range $data.supporters.items }}
      <a href="{{ .url }}">
        <img src="{{ .logo }}" alt="" style="width:120px;"/>
      </a>
    {{ end }}
1 Like