Hugo broke image rendering. Well, they made it better, but broke how I used it. Here’s the fix.
I love Hugo. Well, I did. Then I realized that none of my blog images were loading. Grrrr.
Hugo Image Processing is now the way to do things, apparently. Not sure when that changed, but I’ve not been blogging much this year and certainly not with images. There’s a whole new ecosystem that enables some advanced image processing. This blog seems like a good tutorial.
What a pain! I use these kinds of tags a lot:
<img src="/images/starter.jpeg" width="100%"/>
The width parameter gives me exactly the control I want to scale my embedded images. But Hugo changed and no longer supports embeddeding raw HTML in the markdown. Do I really need to go edit every blog post I have ever done to get new features I don’t even need?
But wait! There’s a trick.
Workaround
You can, actually, just enable it again. Here’s how. In the config.toml file in the root of your blog, add this:
[markup.goldmark.renderer]
unsafe = true
That’s it. Now Hugo will happily support raw HTML again. I suppose they had a good reason to turn this off, but it was a pain that cost me 30 minutes of my life this morning. But then again, I’m not paying for Hugo with money. Open source is paid for with time!
Credits
Thank you to the kind author of this guide for Hugo beginners. Silly, but this is how the internet works. If you are not constantly paying attention things change and your stuff breaks.
