Making images work when posts have a year/month/title structure

[Cédric Simon]

Hi,

I am trying to use this boilerplate, but I have an issue with images. My structure is as follows:

/posts
  /2023
    /08
      /post-title
        index.md

To display posts in Netlify CMS, I have to add path in config.yml like this, otherwise, it shows "No entry":
path: "{{year}}/{{month}}/{{month}}/{{slug}}/index"

But then, if I upload an image, it places it in /posts/2023/08/post-title/ instead of /static/img. And in the Markdown editor, it generates ![](image.jpg) instead of ![](/static/img/image.jpg

If I remove path from config.yml, I can create a new post (but then it goes into /posts/new-post.md), and the image is correctly placed in /static/img/

Than you.

[Dan Urbanowicz]

Hi, can post the contents of your config.yml so we can take a look?

Also, if you haven't already, take a look at the docs concerning Media and Public Folders and the Image Widget.

[Cédric Simon]

@danurbanowicz it's only the default config.yml from this repository with the line "path" added:

# The backend option specifies how to access the content for your site
backend:
  name: git-gateway
  branch: master # The branch to update (optional; defaults to master)

# Uncomment below to enable drafts https://www.netlifycms.org/docs/add-to-your-site/#editorial-workflow
# publish_mode: editorial_workflow

# Uncomment below to enable a link to your published site in the header bar of Netlify CMS
# site_url: https://eleventy-netlify-boilerplate.netlify.app/

media_folder: "static/img" # Media files will be stored in the repo under images/uploads

collections:
  # Our blog posts
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Post" # Used in the UI
    folder: "posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    path: "{{year}}/{{month}}/{{month}}/{{slug}}/index"
    fields: # The fields for each document, usually in front matter
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Author", name: "author", widget: "string", default: "Anonymous" }
      - { label: "Summary", name: "summary", widget: "text" }
      - { label: "Tags", name: "tags", widget: "list", default: ["post"] }
      - { label: "Body", name: "body", widget: "markdown" }
  # Our pages e.g. About
  - name: "pages"
    label: "Page"
    folder: "pages"
    create: false # Change to true to allow editors to create new pages
    slug: "{{slug}}"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Permalink", name: "permalink", widget: "string" }
      - label: "Navigation" # https://www.11ty.dev/docs/plugins/navigation/
        name: "eleventyNavigation"
        widget: "object"
        fields:
          - { label: "Key", name: "key", widget: "string" }
          - { label: "Order", name: "order", widget: "number", default: 0 }
      - { label: "Body", name: "body", widget: "markdown" }

• Without this line the admin shows "No entry". If I create a new post and upload an image, the image is displayed (/static/img/image.jpg)
• With this line the posts are displayed in admin but the img src is wrong (image.jpg). I also noted that I don't see all the images from /static/img in "Medias", only the images uploaded in the folder with .md

[Dan Urbanowicz]

@ced64k

I'd like to be able to help you with this issue, but time is a problem for me right now and CMS post images are not yet within the scope of this boilerplate, so I am going to have to close. Sorry about that.

I'm sure you've already had a look, but the Decap docs should help you figure this out if you haven't already.

https://decapcms.org/docs/beta-features/#folder-collections-media-and-public-folder

[David Vasandani]

@ced64k this resolved the issue for me and here is the plugin discussion adding support to relative paths.

[Cédric Simon]

Thank you @danurbanowicz I'll check 👍