Convert markdown image tag to a <picture> tag in final build

1

Currently, I am using a custom shortcode for images - the reason for that is because my CDN provider allows me to serve different image formats by manipulating the file extension, i.e. I upload .png but I can also serve .webp in frontend just by changing the file extension.

But that also means I can’t simply drag&drop to my Hugo’s WYSIWYG editor an image to turn in into a default markdown image tag ![my cool image](image url).

The problem is, adding manually a shortcode and then populating it with a title/url is pretty painful and time-consuming. And sometimes I need to do that for 20-30 images in one article.

I would prefer to just drag&drop my image to my WYSIWYG editor which will automatically convert to a standard markdown image tag (![my cool image](image src url)) and then have the Hugo build out of it the full <picture> tag, like this:

my image tag in markdown:

![my cool image](https://cdn.mywebsite.com/path/to/my/image.png)

Hugo then, upon site build, instead of just spitting this in final build:

<img src="https://cdn.mywebsite.com/path/to/my/image.png" title="my cool image">

is building this instead:

<picture class="someclass" style="display: block; min-height: 1rem" data-iesrc="https://mycdn.com/path/to/my/image.png" data-alt="my cool image"">
    <source srcset="https://cdn.mywebsite.com/path/to/my/image.webp" type="image/webp">
    <source srcset="https://cdn.mywebsite.com/path/to/my/image.png" type="image/png">
    <noscript><img src="https://cdn.mywebsite.com/path/to/my/image.png" alt="my cool image"></noscript>
</picture>

So few things would need to happen here - Hugo would need to:

  1. detect markdown image tag
  2. replace the file format at the end of the image file url from .png to .webp
  3. correctly populate all the data in ` tag.

How can I achieve it?

2

I think what you want is Hugo’s render-image render-hook feature (Markdown Render Hooks in the docs).

You can see an example I have created for a (work in progress) responsive images hook on this forum

You will obviously also need to use replace or replaceRE

HTH