hugopeek / romanesco-soil

Romanesco is an ecosystem for building websites with reusable components.
https://romanesco.info/
GNU General Public License v3.0
10 stars 1 forks source link

Add tiled grid options to Overviews and Galleries #107

Open hugopeek opened 7 years ago

hugopeek commented 7 years ago

Could use Masonry / Isotope in later iterations, but the primary goal is to display image grids without a gutter between the items.

I already started experimenting on Person and Project overviews by adding a Tiled template variant, but I can't recall if that got implemented in core..

Main challenge is to decide how to include the images. CSS background images offer more design flexibility, but backend implementation is a bit hacky. An alternative could be to use the object-fit technique on regular <img> tags. That way, things like 'background-size: contain' can be used on the image tag as well, but it will require a polyfill for IE.

Also consider the upcoming implementation of responsive images: https://github.com/hugopeek/romanesco-patterns/issues/71

hugopeek commented 7 years ago

Link to object-fit technique: https://css-tricks.com/almanac/properties/o/object-fit/