This repo contains a CLI program that scans a local directory for images and generates a simple HTML gallery using the experimental CSS Masonry layout

Search code, repositories, users, issues, pull requests...

submited by
Style Pass
2024-04-29 18:00:02

This repo contains a CLI program that scans a local directory for images and generates a simple HTML gallery using the experimental CSS Masonry layout. The gallery file generated is left in the directory, so in the future, you can just open it in a browser.

The CSS Masonry option does a great job of using up all of the available space in the window. It also works well with browser scaling/zooming. I like the experience of browsing images this way much more than the default Windows file explorer with the "Extra large icons" view mode.

View the example-gallery in GitHub Pages. Note the small icons on the top-right. Try clicking on a few images, then clicking the filter button.

At the time of writing this, to use the Masonry layout in Firefox, navigate to about:config and set layout.css.grid-template-masonry-value.enabled to true.

The file template.html contains the unminified HTML template of the gallery page with a bit of CSS and JavaScript. This app simply loads that file and replaces the below placeholders with some text and HTML.

Leave a Comment