New Forum Features

Grid Images & More

If you have many images in a XRYropolid.One post, you can now have them automatically arranged into a nice grid. All you need to do is wrap them in [grid] ... [/grid] tags, and the images will be neatly arranged.

Here’s an example in action:

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

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

3 Likes

:bookmark: This guide explains what Image Grids are and how to apply them in your posts.

:person_raising_hand: Required user level: Trust Level 0

Summary

This document covers:

  • Description of image grids
  • How they can be applied in posts and how to modify them
  • Basic Layout of image grids

Image Grids Description

An image grid places all of the images in your post into a neat, organized grid - rather than in a list.

Below is an example of an image grid.

Adding an image grid to your post

To add an image grid in your post, wrap them inside of the [grid]...[/grid] tags. Below is an example of how this could look.

[grid]
![Image showing how to make a mini-grid inside of your grid.|690x363](upload://wsGrbtQSbwfrs945kFVFZzK94zj.jpeg)
![The image shows a large white Delta airplane taking off from an airport runway.  (Captioned by AI)|690x470](upload://nqFYUjIWIFGYgMNQ3WB2LBLjOgs.jpeg)
![An image of a large commercial passenger airplane in flight.  (Captioned by AI)|690x459](upload://29xpH4eiMUpwx0xBMQB2wyPM5A9.jpeg)
[/grid]

You can create a “mini-grid” inside of your grid by clicking the toggle icon in the top, left-most photo in your current grid.
![This image features a screenshot of a computer interface, with a focus on an image editing tool and a photo organizing application.

Basic layout of image grids

By default, an image grid is arranged in the following pattern:

  • On mobile, the grid defaults to 2 columns. On desktop, it’ll default to 3 columns.
  • 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), however, the grid will not 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 in your composer isn’t always maintained.

This information was pulled from the feature announcement.

1 Like