Images appear out of order (Grid - Masonry)

Problem:

The order of the images in the Gallery within your toolbox, are not the same as what is displayed on your website.

Issue:

In most cases, this is due to using the Grid - Masonry gallery style for your gallery.

The Grid - Masonry gallery style dynamically scales and reconfigures your images in order to fit onto the screen it is being displayed on. It works by placing images in an optimal position based on the available vertical space and the height of your images, sort of like a stone mason fitting stones into a wall. If you look closely at your images on your website, you will see that they are not exactly the same size in terms of height. This variance determines how the Masonry style calculates how the images will be displayed in the thumbnail grid on your website.

We didn't invent this style by any means, but it has become very popular across the Internet.

Solution:

If you dislike this behavior – and yes we agree it can be confusing if you are expecting the images to be in order when viewing the Grid gallery – you should change the Grid gallery style to be Uniform (instead of Masonry) or change it to a Slideshow style instead. You can change this setting globally in the Design tab > Gallery panel:

Alternatively, if you only want to affect the appearance of a single gallery, you can use the Custom Gallery Settings override for that particular gallery.  See Custom Gallery Settings for more information.

In any case, Image order is retained, once the thumbnail images are launched into the single-image slideshow mode.