# CMS image path conversion issues

**URL:** <https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687>\
**Category:** support\
**Tags:** images\
**Created:** [December 8, 2024, 3:22pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687 "2024-12-08T15:22:29Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![hyruo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hyruo/32/22269_2.png) [@hyruo](https://discourse.gohugo.io/u/hyruo)\
**Post date:** [December 8, 2024, 3:22pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/1 "2024-12-08T15:22:29Z")

</div>

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:

> <https://github.com/pages-cms/pages-cms/issues/29>
>
> What's the configuration for a setup like this? All what I have tried so far did…n't work and keeps assuming I have one folder for ALL my media, which is very chaotic.
> 
> Folder structure is simply like this
> \`\`\`
> content/
> posts/
> post1/
> index.md
> image1.png
> post2/
> index.md
> image1.png
> post3/
> index.md
> image1.png
> \`\`\`

> **[How to use Hugo Image Processing with Tina CMS? · tinacms/tinacms ·...](https://github.com/tinacms/tinacms/discussions/4198)**
>
> Hey everyone, I'm trying to migrate an Hugo-based website from Forestry to Tina and have some troubles with my media support. I am using Hugo's image processing functionality to scale the source im...

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 8, 2024, 3:38pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/2 "2024-12-08T15:38:24Z")

</div>

> [@hyruo](#):
>
> neither can handle image path issues in Hugo

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…

---

<div class="post-metadata">

**Author:** ![hyruo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hyruo/32/22269_2.png) [@hyruo](https://discourse.gohugo.io/u/hyruo)\
**Post date:** [December 8, 2024, 3:47pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/3 "2024-12-08T15:47:39Z")

</div>

For example, in Pages CMS, I need to customize the input and output paths for images, such as:

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 8, 2024, 3:55pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/4 "2024-12-08T15:55:04Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![hyruo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hyruo/32/22269_2.png) [@hyruo](https://discourse.gohugo.io/u/hyruo)\
**Post date:** [December 8, 2024, 3:56pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/5 "2024-12-08T15:56:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 8, 2024, 3:59pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/6 "2024-12-08T15:59:59Z")

</div>

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

```plaintext
![alt](a.jpg)

```

So I don’t understand the problem.

---

<div class="post-metadata">

**Author:** ![hyruo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hyruo/32/22269_2.png) [@hyruo](https://discourse.gohugo.io/u/hyruo)\
**Post date:** [December 8, 2024, 4:13pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/7 "2024-12-08T16:13:54Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 8, 2024, 4:16pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/8 "2024-12-08T16:16:25Z")

</div>

> [@hyruo](#):
>
> `![1](/content/editor/hugo/1.webp)`

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.

---

<div class="post-metadata">

**Author:** ![hyruo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hyruo/32/22269_2.png) [@hyruo](https://discourse.gohugo.io/u/hyruo)\
**Post date:** [December 8, 2024, 4:20pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/9 "2024-12-08T16:20:31Z")

</div>

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

```auto
---
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`

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 8, 2024, 4:29pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/10 "2024-12-08T16:29:50Z")

</div>

> [@hyruo](#):
>
> `![a](/content/post/article-1/a.webp)`

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

---

<div class="post-metadata">

**Author:** ![hyruo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hyruo/32/22269_2.png) [@hyruo](https://discourse.gohugo.io/u/hyruo)\
**Post date:** [December 8, 2024, 4:38pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/11 "2024-12-08T16:38:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 8, 2024, 4:48pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/12 "2024-12-08T16:48:02Z")

</div>

> [@hyruo](#):
>
> without being processed by Hugo

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.

---

<div class="post-metadata">

**Author:** ![hyruo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hyruo/32/22269_2.png) [@hyruo](https://discourse.gohugo.io/u/hyruo)\
**Post date:** [December 8, 2024, 4:52pm UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/13 "2024-12-08T16:52:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hyruo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hyruo/32/22269_2.png) [@hyruo](https://discourse.gohugo.io/u/hyruo)\
**Post date:** [December 9, 2024, 9:59am UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/14 "2024-12-09T09:59:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [December 11, 2024, 9:59am UTC](https://discourse.gohugo.io/t/cms-image-path-conversion-issues/52687/15 "2024-12-11T09:59:48Z")

</div>

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