Gabz
Gabz

Things I wish I knew how to:

Make a group of pictures to post as a grid on my blog.

|
Embed
Progress spinner
lmika
lmika

@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.

|
Embed
Progress spinner
Gabz
Gabz

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

|
Embed
Progress spinner
lmika
lmika

@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.

|
Embed
Progress spinner
jsonbecker
jsonbecker

@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.

|
Embed
Progress spinner
In reply to
pratik
pratik

@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.

|
Embed
Progress spinner
Gabz
Gabz

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

|
Embed
Progress spinner
jsonbecker
jsonbecker

@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.

|
Embed
Progress spinner
Gabz
Gabz

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

|
Embed
Progress spinner
jsonbecker
jsonbecker

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

|
Embed
Progress spinner
Gabz
Gabz

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

|
Embed
Progress spinner
Gabz
Gabz

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

|
Embed
Progress spinner
Gabz
Gabz

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

|
Embed
Progress spinner
lmika
lmika

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

|
Embed
Progress spinner
lmika
lmika

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

|
Embed
Progress spinner
jsonbecker
jsonbecker

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

|
Embed
Progress spinner
pratik
pratik

@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?

|
Embed
Progress spinner
Gabz
Gabz

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

|
Embed
Progress spinner
pratik
pratik

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

|
Embed
Progress spinner
Gabz
Gabz

@pratik I guess I can do that too

|
Embed
Progress spinner
jsonbecker
jsonbecker

@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.

|
Embed
Progress spinner