search

mfg92 / hugo-shortcode-gallery

A theme component with a gallery shortcode for the static site generator hugo.
MIT License
355 stars 66 forks source link

Support CSS3-only layout using grid-template-rows: masonry #45

Open martinschneider opened 2 years ago

martinschneider commented 2 years ago

CSS3 has built-in support for masonry grid layouts. This could be used to manage the layout of the gallery without JS. As a side-effect this would also solve issues like #35 where automatic crawlers don't find the images because they are loaded dynamically.

masonry-layout is currently only supported in Firefox, but other browsers might follow. We could keep the current approach as a fallback to ensure the gallery looks great everywhere.

I built a quick PoC based on this article and it looks promising. If there's interest to go down this path, I could invest some time to come up with a PR, or also help/review if someone else wants to build this.

mfg92 commented 2 years ago

That sounds interesting. Thank you for pointing that out to me. If we do that in the future, we have to check that we do not lose any functionality like lazy loading, filtering, etc. In the examples they have the images are arranged in columns, will rows (as we have it right now) work too?

I would prevere this JS-less approach to the current one when there is support for that in FF, Chrom(ium), Edge and Safari. I think it is currently to early to start any implementation, as even in Firefox this feature is hidden behind a flag: https://caniuse.com/mdn-css_properties_grid-template-rows_masonry

Having the old and new CSS3 approach mixed could lead to hard to understand and hard to maintain code.