Hacker News new | ask | show | jobs
by lewiscollard 507 days ago
You copy it into the same directory as the post you want to put it in, and reference it as a resource from your post. I made a shortcode for this for my own Hugo site, adding auto thumbnailing & WebP support:

https://gist.github.com/lewiscollard/c6651648d1c20144ed89e16...

Copy that into your "layouts/shortcodes/image.html" and use it as

    {{< image src="my cat.jpg" alt="add a description here" >}}
If you just want to upload it to _not_ reference it in a post/page, copy it into your `static` directory and it'll be passed through when the site is built.

Hope that helps!

1 comments

Plain old markdown image syntax also works, although there is no way to preprocess the file or add any additional HTML attributes beyond what you see here:

    ![add a description here](my cat.jpg)
Yep, that works too. I wrote the shortcode because I didn't want to have to manually resize pictures. That's effort and it means if I change my layout to require wider pictures I have to go find the originals.

I think you could do this with a render hook if you want to get fancy (with the benefit that the Markdown for your posts stays as plain Markdown): https://werat.dev/blog/automatic-image-size-attributes-in-hu...