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.