Here’s an example of the markup pattern I wanted to generate: I have a few dependencies that may not match your setup: I use Nicolas Hoizey’s Images Responsiver plugin, 3 and I use Netlify Large Media to scale images on the server side, instead of pre-processing images as a build step.
#Batch image resizer 2x3 code#
The PhotoSwipe setup code to process the gallery items.I’ve broken this up into three big areas of concern: What follows is very specific to my implementation within Eleventy, but I hope it’s helpful for others with a similar scenario in mind. There are pretty good examples in the documentation, though, and I had a functional implementation after working on it in small stretches over two days. The documentation is very clear about it requiring some work to set up. That said, it’s not an automated solution where you just point it at a folder of images. PhotoSwipe managed to check off my requirements, and more importantly the experience felt nice when I was testing on different devices. Rich’s example was more of a standalone gallery, not one tied to a post, but it had the seeds of what I needed. I heard about PhotoSwipe through this Twitter thread from Tatiana Mac, specifically this reply from Rich Holman. PhotoSwipe: This is what I ended up using.SmartPhoto: I like this one but the display falls apart on very small viewports, like my first-generation iPhone SE.Medium Zoom: this has a pretty nice execution but lacked keyboard support.My list of requirements was fairly short: So I started looking for a solution, and let me tell you: there are a lot of JavaScript image gallery/lightbox solutions out there. However, one of my design principles for this site was to keep as much of the content within the site as possible. Earlier versions of my blog linked to galleries that I managed in Flickr, and that remains an option. TL DR: I’ve set up a CodePen project that you can dig through.įor as long as I’ve been blogging I’ve wanted to have a photo gallery solution, so that I could mix in batches of photos without necessarily creating a super-long scroll on a post. #web-development PhotoSwipe lightbox modal
0 kommentar(er)
