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:
- detect markdown image tag
- replace the file format at the end of the image file url from
- correctly populate all the data in
How can I achieve it?