Image grids on the forum

Hey everyone! :wave:

I have good and bad news. The bad news is that, as some of you might have noticed already, the image grid gallery plugin we have been using is not always working perfectly, as it stopped being developed. It will break completely in future updates of the forum software, and we’ll have no choice but to remove it. :frowning: I’m referring to this one:

The good news is that now there is an alternative that is easy to use and native to the forum software we use (so it won’t stop working in the future)!

If you have many images in a post, you can have them automatically arranged into a nice grid. All you need to do is wrap them in [grid] and [/grid] tags, and the images will be neatly arranged, aligned both at the top and the bottom (some images might be a bit cropped, in order to fit). Here’s how that looks:

And here’s how that looks while editing the post (notice the tags on the first and last line):

[grid]
![IMG_8632|340x340](upload://plxehsRYFZ8xRZzShByRWxax2uC.jpeg)
![IMG_0271|340x255](upload://5mQ7f8TyDFWZtpnRgpCeVzPbByy.jpeg)
![IMG_E5112|340x340](upload://f34NE7CPL2Mu3nJYPlQyo0nzWpr.jpeg)
![IMG_6071|340x453](upload://n0MuSROEXex23lgq4Ck2BLykjur.jpeg)
![IMG_9775|340x340](upload://a4yYZu1Jrj21koUqJ546wfvr6kX.jpeg)
[/grid]

Enabling or disabling the grid can also be accomplished by clicking a small toggle icon when hovering the first image in a group of images in the composer preview:

A few additional technical notes:

  • on mobile, the grid defaults to 2 columns, on desktop to 3
  • if there are exactly 4 items in the grid, the images will be arranged into 2 columns
  • non-image elements can also be used (like videos), but the results won’t align perfectly
  • the items in the grid are arranged to ensure the column heights are as close to each other as possible, therefore, the order of the images isn’t always maintained

If you were using the old version of grids (Grid gallery), please consider switching over to the new ones when you can! :slight_smile:

36 Likes