Hugo Mods - Responsive Lazy Image Loading / Dynamic SVG Symbols

Hi there!

I would like to share two Hugo modules with you which make it very easy to quickly get a modern website/theme up and running:

  • lazyimg: Responsive lazy image loading (via lazysizes) module, with support for Low Quality Image Placeholders. Empowered by Hugo’s image processing abilities, it gives you the comfort to automatically resize assets, plus WebP support with fallback. The only thing you need to provide is a single high-resolution image.
  • icons: SVG symbol icon system, which collects only the icons you really use on your site. It’s designed to be extensible: While it currently supports FontAwesome icons, it will be possible to use any kind of SVG icon families in the future.

You can quickly test each module by interactively checking out their exampleSite (runnable via hugo server) or by going through the theory in the README.

Part of the functionality might be already provided as shortcodes somewhere here in the forum, but the goal of the introduced modules is their ease-of-use, extensibility and stability.
Thinking bigger, it would be great to have a community-managed organization where we can maintain a set of useful hugo-mods! I’ve created a GitHub organization for that where the above modules live in. Just drop me a message if you’re interested to collaborate.

I’d appreciate any feedback and improvement ideas.

7 Likes