Displaying Pictures in Masonry View

Usually, images are displayed in the order you uploaded (or arranged) them and presented one after the other, going down the page. With masonry view it’s now possible to display images in a block.

Desktop view:

Mobile view:

By default, images are presented horizontally in the order you upload them. You can rearrange how they look by changing the order they’re uploaded/listed in your post.

To have your images displayed this way follow these steps:

  1. Upload your photos as normal. You’ll see text similar to what’s shown below. It’s important that you don’t have any blank lines between the images if you want them to display in masonry view.
![6BCDF391-CAE1-4BB4-9D6C-FEAAB6FE9B18_1_105_c|666x500, 75%](upload://wDL2UJ8x1oU3JnOafUH1R1ZEKKw.jpeg)
![E07D0D41-A7F0-45EA-B768-3A62383875F6_1_105_c|666x500](upload://3MPqwOPcj1DSRr3R8L3JmXTrWbO.jpeg)
![D62A48F8-115D-4287-8ADE-9ADC13921AC1_1_105_c|690x483](upload://fXnwFABKnO2FZYT7dPuY8sLu3Bc.jpeg)
  1. If you’ve uploaded three or more photos and want to use the masonry view, you’re all done! If you don’t want this to happen then simply add a blank line between the photos and you’ll see the usual view.
![6BCDF391-CAE1-4BB4-9D6C-FEAAB6FE9B18_1_105_c|666x500](upload://wDL2UJ8x1oU3JnOafUH1R1ZEKKw.jpeg)

![E07D0D41-A7F0-45EA-B768-3A62383875F6_1_105_c|666x500](upload://3MPqwOPcj1DSRr3R8L3JmXTrWbO.jpeg)

![D62A48F8-115D-4287-8ADE-9ADC13921AC1_1_105_c|690x483](upload://fXnwFABKnO2FZYT7dPuY8sLu3Bc.jpeg)

If you have just two images you can still use the masonry view to display them side-by-side. To do this, make sure there are no blank lines between the uploads, as noted above. Select the text to highlight the images you want

and click the button shown here:

You’ll see two lines added above and below the selected text. This tells the forum how to display the images. If you change your mind, just delete those lines.

<div data-masonry-gallery>

![6BCDF391-CAE1-4BB4-9D6C-FEAAB6FE9B18_1_105_c|666x500](upload://wDL2UJ8x1oU3JnOafUH1R1ZEKKw.jpeg)
![E07D0D41-A7F0-45EA-B768-3A62383875F6_1_105_c|666x500](upload://3MPqwOPcj1DSRr3R8L3JmXTrWbO.jpeg)

</div>

Finally, you can, if you want to, use the techniques above to display some photos in masonry view and others as normal.

3 Likes