@Gaby Have you taken a look at @jsonbecker‘s Lightbox plugin for Micro.blog? It allows you to make a 2 column grid of photos which you can tap on to enlarge. Here’s an example of how it looks on a page.

@lmika ha! I don't think I have, once installed, do i need to do anything manually tho?

@Gaby So after installing, you’ll need to use a short-code to make a grid of photos. Instead of having:

<img src=“picture1.png”>
<img src=“picture2.png”>

You’ll have something like the following:

<div class=“img-gallery”>
{{<glightbox src=“picture1.png” gallery=“my-group-name” >}}
{{<glightbox src=“picture2.png” gallery=“my-group-name” >}}
</div>

Where gallery is an ID to use for the gallery (to distinguish it from other galleries on the page). I think the div will make the grid and the shortcode will make them expandable when tapped. It shouldn’t affect any other <img> you have on the page.

@lmika @gaby A few updates:

1. You don't need to use the short code anymore. You can just use the Markdown image syntax if you want. This is great for one photo, but works for galleries too. The trick for that gallery is you need a blank line after the first div and a blank before the closing div.
2. You don't need to specify the gallery if you only have one gallery in your post. I now by default add a unique identifier to the gallery based on the post ID that should keep the gallery the same for the post. If you want two separate galleries in the post, the above works.

The div is just a way to get the built in style for building the grid-- you can use your own CSS. You're only getting 2 columns because of the width of your blog post column and the default size in the CSS I include. With a wider blog post (or smaller setting for your photos) you could get wider grids if you want.

My favorite thing with this plug in is that every image that uses Markdown syntax will now click to expand into a lightbox-- it's quite nice compared to the standard image.

@jsonbecker @lmika @Gaby But you still need to add some code manually for it to display as thumbnails, right? I wish that were by default and hopefully in a masonry layout.

@pratik @jsonbecker @lmika and yet all of this, for some reason, goes over my head a little 🫣

@pratik a div with the class of img-gallery is how you get the grid. A masonry layout is substantially more complex in a pure CSS implementation-- most folks resort to a significant amount of javascript. I will not add that until there's widespread support for the proposed grid template property masonry.

I am not aware of any way to apply styling like a grid to a series of elements automatically for any plug in-- you need a container for CSS selecting for the images. You could add styling to individual images, but not to wrap around a series of images without some syntax.

@pratik @jsonbecker @lmika I’m gonna need a video-tutorial 😅

@Gaby @pratik @lmika install my plug in, do this:

@jsonbecker this goes on the actual post, I presume ?

@Gaby yay! That did it! Obviously not very noticeable on mobile. But I can see it on the iPad

@jsonbecker it works! Not noticeable on mobile but I can see it on the iPad , thank you

@Gaby @jsonbecker Here you go: www.youtube.com/watch. Sorry, might have been a bit late, but this conversation got my creative juices flowing. 😀

@jsonbecker Ah, thanks for the updates. That's really good to know.

@Gaby it’s “responsive” so on smaller devices rows pivot to columns as needed.

@jsonbecker @gaby @lmika Thanks! This is much better. I've added div class to Pastebot for easier use. Since masonry layout is not yet standard, I've to remember to use similar format photos together.

BTW know where I may reduce the gap between two rows?

@pratik @jsonbecker @lmika I post mostly from my phone so I can either crate a template on drafts or just save it in Tot

@Gaby Create a keyboard shortcut. Typing img expands to that code.

@pratik I guess I can do that too

@pratik not sure what’s causing that. I think I use just one grid-gap of 10px all around. I will try and remember to look when I’m at my desk tomorrow.