CMS image path conversion issues

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.

issues like this:

What are the issues you refer to?

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).

After you’ve created content and uploaded images, are you saying that your directory structure looks like this?

content/
├── post/
│   ├── article-1/
│   │   ├── a.jpg
│   │   └── index.md
│   └── article-2/
│       ├── b.jpg
│       └── index.md
└── _index.md

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.

Well, that content structure looks great, allowing you to use this markdown in article-1/index.md:

![alt](a.jpg)

So I don’t understand the problem.

---
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.

Sorry, this is a folder I set up myself. It should normally be like this.

---
title: hugotest
image: a.webp
---

![a](/content/post/article-1/a.webp)  # by CMS (cannot be modified)
![a](a.webp) # Manually input, causes an error in CMS

![a](/content/post/article-1/a.webp) After being built by Hugo, it becomes http://localhost:1313/content/post/article-1/a.webp

![a](a.webp)After being built by Hugo, it becomes http://localhost:1313/article-1/slug/1_hu18264491497342316918.webp

So, the only problem with the destination above is that it begins with “/content”. Is that correct?

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.

Alright, thank you again for your help. I have resolved the issue I wanted to address, and I will look into the final matter later.

1 Like

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:

  1. 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.

  2. 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.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.