Easy image upload using render hooks

tips & tricks
1

I’ve been playing around with Hugo’s markdown render hooks recently to do some increasingly convoluted things. My most successful project is this:

Hugo Image Uploader

It’s a way to upload images to static while writing a blog post, directly from the browser. It works by changing the HTML for images with empty paths and injecting some JavaScript when Hugo’s in dev mode + running a NodeJS upload server. The repo has a video demonstration.

The upload directory scheme is hard-coded to according to my own blog’s peculiarities and there’s no support for e.g. page bundles.

4 Likes
2

That is some pretty neat functionality. Really like that there are no dependencies!

Instead of adding it as a git submodule I would point people to add it as a Hugo module. A personal preference, but I have never liked git submodules. Hugo modules on the other hand are a pleasure to use.

1 Like
3

brillant. thanks

1 Like
4

Thank you! It does depend on nodejs, but I strove to avoid making anyone run npm i in their Hugo site directory. Thanks for the tip on Hugo modules, I’ve updated the readme with some alternatives for managing the dependency.