GLightbox for collections

Developers
1

This is mostly for @jsonbecker but thought I’d post it publicly… Today we’re going to roll out Micro.blog “photo collections”. There is some default CSS and JS for these, but I think it would be cool if the GLightbox plug-in is installed, the collections use GLightbox instead.

I’m not very familiar with GLightbox, so happy to hear any suggestions. The default HTML that Micro.blog generates looks like this:

<div class="microblog_collections">
<img src="image1.jpg" data-microblog-lightbox="larger-image1.jpg">
<img src="image1.jpg" data-microblog-lightbox="larger-image2.jpg">
</div>

This is just a nice-to-have and of course someone could use GLightbox directly without any problems if they are used to that workflow already.

2

Interestingly, glightbox doesn’t wrap things in a div by default. I couldn’t really figure out how to do that in a way that was satisfactory, so I just offer an img-gallery css class that folks can use on their own for that styling. The actual image content is here:

It’s not too dissimilar – there’s a data-gallery property that makes sure that on a page with multiple image galleries they stay separate (you can name them or it’ll be per post using the post uniqueID) and then data-glightbox which contains things like title and description for the lightbox. That’s all on a link to the image itself, which is just a normal img entity.

I wonder if I could wrap using hte microblog_collections class and dump the img-gallery CSS I ship.

One thing that’s unique about the plug in is I do use a markdown render hook so that images from Markdown are automatically wrapped with a link and the data-glightbox info: plugin-glightbox/layouts/_default/_markup/render-image.html at main · jsonbecker/plugin-glightbox · GitHub – but that’s on a single image.

3

Cool, thanks for looking at this. I think ideally a plug-in like GLightbox could hook into the default styling in Micro.blog collections, but also all the other shortcodes would be available for people who want more control. We may need to tinker with a couple ideas, and I’m open to changing Micro.blog’s internals if it helps, such as overriding the default CSS class.

4

Yeah I’m going to play with a bit in a demo blog this weekend.

5

Is this result of this work, @jsonbecker?

I am looking for something like this, but perhaps a bit simpler.

6

For a bit of context, I love the way this collection looks and works on my site:

https://benedwards.org/home-addition-photos/

I just want to be able to use the same interaction in a post like this:

I could accomplish this by making a new collection for every poat with multiple photos but that seems gross. Ideas?

7

You can use the glightbox plug-in and then just post multiple image with Markdown in a post. That would put them all in a gallery.

To get the smaller images and rounded edges, you can almost certainly wrap those images in DIV with class class="microblog_collections" to get the same grid you get with collections. If you don’t like that look, I also have the class="img-gallery" which is available when installing plugin-glightbox. And in both cases, you can always have your own custom CSS to target a div class like that to tweak it.

1 Like