Support image gallery

[markdumay]

Problem or enhancement idea

Hinode supports responsive images that automatically scale with the viewport. However, there is currently no support to view multiple images in a gallery.

Proposed solution

Introduce a new gallery component that renders image thumbnails in a grid or masonry layout. When clicking on an image, the image opens in a full-screen overlay with navigation support. For example, Material Design for Bootstrap v5 provides a (premium) Lightbox component.

Alternatives

N/A

Additional context

Hinode should be able to render the thumbnail gallery with minimal code adjustments. For a more playful layout, a column-oriented layout could be supported as alternative. The full-screen display with navigation controls would require a so-called Lightbox element. Ideally, an open-source library can be leveraged that uses vanilla JS and is lightweight.

[Ipstenu]

I worked for a webhost for a decade so and thought of this late last night.

One thing to keep in mind is image storage location. If you start to build out support for galleries, you will need to ensure you don’t have all the files in one folder. Besides the fact it’s messy, it also will run afoul of system limits at scale. There’s a practical limit to how many files can be in a folder, you see.

looking at other tools I’ve used, WordPress makes a folder based on the date, and MediaWiki has random folder names based on the date and user. Now, we aren’t uploading images like that, but because Hugo effectively compiles them on build, and Hinode puts them in locations when the shortcode is used, it’s something to keep in mind.

[Ipstenu]

Free light boxes

• https://www.cssscript.com/lightbox-gallery-bootstrap-5/
• https://trvswgnr.github.io/bs5-lightbox/ (I use this one)
• https://github.com/sachinchoolur/lightGallery (GPLv3 with commercial license)