Hello everyone, I recently tried two CMS programs, including Tina CMS and Pages CMS, but it seems that neither can handle image path issues in Hugo. My images are stored in the same folder as the md files, located in content/post. However, both of these CMS programs only support placing image collections in folders like assets. I would like to know if there are any CMS programs currently available that support storing images in the same path as the index.md file.
Although I agree it would be ideal if the CMS stored page-specific images adjacent to an index.md file in a leaf bundle, perhaps there’s another way to address the “issues” to which you refer…
For example, in Pages CMS, I need to customize the input and output paths for images, such as:
media:
input: content/post
output: /content/post
When I uploading an image in the editor, it automatically generates ![1](/content/post/aritclename/1.jpg) in the md file. However, this path is automatically converted to /articlename/content/post/aritclename/1.jpg in Hugo, leading to an error. I currently have hundreds of blog posts, all using the format ![1](1.jpg).
Yes, that’s exactly it. In the early stages of using Hugo, some image files were placed in a separate images folder under article-1. However, the majority of the images are in the same folder as the index.md file.
---
title: hugotest
image: 1.webp
---
![1](/content/editor/hugo/1.webp) # This is the automatically input image address after uploading the image in the CMS (cannot be modified)
![1](1.webp) # This is the image address I manually input, which can be correctly processed in Hugo. However, manually inputting it in the CMS causes an error. Because the CMS considers /content/editor/hugo/1.webp to be the correct image path.
Please provide an example of what this would look like using the content structure in my first reply. I have no idea where “editor” or “hugo” are coming from.
Thank you for your answer, it gave me inspiration. Indeed, I had an extra /content in my media settings. I found that removing it actually worked. However, the image is displayed in its original form on the blog, without being processed by Hugo into a file like _hu183582110094981122.webp.
If the image appears on the page because you inserted something like ![alt](a.jpg) in your Markdown, Hugo won’t process the image unless you’ve created an image render hook.
Today, I spent some time solving the problem at hand.
Following your guidance, I modified the image-render.html to extract a.webp from ![a](/content/post/article-1/a.webp) separately, allowing it to be processed like ![a](a.webp). However, this introduced two additional issues:
If I have photos stored in the /content/post/article-1/images directory, these photos would not be processed. I resolved this issue by using a batch script to move all photos inside the images folders up one level.
The CMS automatically generates paths like ![a](/content/post/article-1/a.webp), where article-1 is the folder name. Previously, I used a manually set slug as the fixed link. I created a separate posts folder in content specifically for writing in the CMS. After all, the CMS’s image input path can only be set to a single path and cannot simultaneously support both content/posts and content/post.
I used to use Hexo as my blog platform, but the community support for Hexo is really limited, mostly relying on self-searching through Google. The Hugo community has technical experts like you who help newbies, which is truly amazing.