Netlify CMS image widget + Zola

Support
1

I’m attempting to setup a static site with Zola that has Netlify as a CMS. Netlify’s image widget adds variables to the frontmatter at the root level, resulting in a frontmatter that looks like this:

+++
title = "My Blog Post"
description = "A description of my blog post."
author = "Sam"
blogimage = "/images/uploads/my-picture.png"
+++

I’d like to access the image location from a template in Zola. However the following doesn’t work due to the fact that only predefined frontmatter attributes seem to work at the root level in Zola:

{{ page.blogimage }}

Variable `page.blogimage` not found in context while rendering 'blog-page.html'

The following would work, but I see no way to get Netlify to include the [extra] tag inserted into the frontmatter:

Frontmatter:

+++
title = "My Blog Post"
description = "A description of my blog post."
author = "Sam"
[extra]
blogimage = "/images/uploads/my-picture.png"
+++

Variable usage in template:

{{ page.extra.blogimage }}

Is anyone familiar with any options or an approach I could try in either Zola or Netlify to solve this apparent incompatibility? Thanks!

2

Came across this post with the same issue and think I found the solution.

Netlify CMS allows you to structure fields as objects using the 'object' widget. You need to create a top level field with name: 'extra' and widget: 'object'. You can nest additional fields under that, including an image field, which will generate frontmatter you can access in templates using page.extra.blogimage etc.

An example (this is in the config.yml file in the admin folder, which manages the Netlify CMS fields):

collections:
  - label: 'Blog'
    name: 'blog'
    folder: 'content/posts'
    create: true
    format: 'toml-frontmatter'
    editor:
      preview: false
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - label: 'Extra'
        name: 'extra'
        widget: 'object'
        fields:
          - { label: 'Featured Image', name: 'blogimage', widget: 'image' }
            # your other fields as required

This generates front-matter correctly in the generated markdown file:

+++
title = "blog title"
[extra]
blogimage = "/static/images/uploads/image.jpg"
+++

I may put together a boilerplate project for Zola and a minimal netlify CMS config as a repo on Github.

3 Likes