search

dirtystylus / eleventy-test

MIT License
1 stars 1 forks source link

BE: Image Slideshow/Grid #19

Closed dirtystylus closed 3 years ago

dirtystylus commented 5 years ago

My thinking, currently:

dirtystylus commented 5 years ago

Not a lot of Markdown image gallery solutions, current thinking is maybe just wrap a <div class="gallery"> tag around a bunch of images, and use CSS grid to just turn that into a grid.

The alternative is perhaps to do something like this Jekyll example, but with the Eleventy front matter

dirtystylus commented 5 years ago

Here’s my thinking for an image grid:

.gallery {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
dirtystylus commented 3 years ago

Chris sent me this: https://medium-zoom.francoischalifour.com

dirtystylus commented 3 years ago

Tried Medium Zoom and SmartPhoto

Both had issues. Medium Zoom scales based on the image proportions, so a cropped image won’t expand to full dimensions. You get some weird distortion coming out of a masonry-style CSS grid gallery

SmartPhoto seems to fall apart at small viewports. It looked quite bad on my iPhone SE

Maybe I don’t want a grid of images, in the end? It feels like maybe I should still link to a Flickr gallery for full sets? In which case maybe using the Medium Zoom approach on single, inline images feels like the way to go.

dirtystylus commented 3 years ago