Picture path compatible with GitLab Markdown preview

support
1

Hi there,

I’m using Hugo from GitLab Pages to create a website from a collection of single markdown documents.
Most contributors are meant to only work with GitLab, so verifying the picture works without rendering with Hugo would be useful.

We’re mostly using this file structure:

  • item01/
    • picturex.jpg
  • item01.md

Although for this problem it would be easier to go with this:

  • item02/
    • index.md
    • picturey.jpg

adding a picture so it works with Hugo would look like this:

![picturex.jpg]
<img src="picturex.jpg" width="25%" title="title" alt="Text to show if image is not rendered">
![picturey.jpg]
<img src="picturey.jpg" width="25%" title="title" alt="Text to show if image is not rendered">

But to render correctly in the GitLab markdown preview:

![item01/picturex.jpg]
<img src="item01/picturex.jpg" width="25%" title="title" alt="Text to show if image is not rendered">
![picturey.jpg]
<img src="picturey.jpg" width="25%" title="title" alt="Text to show if image is not rendered">

I’d really prefer to keep the item.md in the root folder of the repository (easier access for not so “GitLab fluent” people).

My thinking is to keep the the folder in the markdown, and filter out the folder from the path with CI/CD before Hugo is executed.

And here are the questions:

  • Any easier way to handle this?
  • Any way maybe to handle this with hugo code?
  • If handled in a script before hugo, has anybody done this already?

Otherwise I’d go with grep/regexp in bash or so…