Change Masonry to have posts order left to right

[procos]

Hi,

we are using Integrity and our blog page (used to display news items) is using masonry, which looks great because our post thumbnails have different sizes depending on title, text and image.

Our news posts are displayed in chronological order, starting with most recent… This is fine on the first row because all items are aligned at the top, but in the subsequent rows, as thumbnails differ in size, the next post in order takes the uppermost space in the grid first, and not necessarily the one that is most to the left. This causes some confusion to our readers who expect that more recent posts appear from left to right.

Please see below the image below. Chronological order is currently C, B, D, A BUT we want A B C D.

We understand that this is Masonry behavior depending on what free space is found in the grid, but is possible to change this behavior by customizing the Masonry JS files? (we already have a child theme set up).

[rad]

Hi @procos,

Thanks for reaching out.

It could be possible but that requires custom development, like repacking of the scripts. The script used was Isotope Mazonry in which we didn’t develop, there is some modification but we don’t recommend editing it. Still possible but it’s something we can’t cover here in the forum.

Thanks for understanding.

[procos]

Hi,

thank you for the input. The option we need is just a simple true/false flag in the Isotope JS object… which achieves the desired result.

We understand you cannot guide us specifically for the modification since it involves a third party library but are there any starter articles/guidelines for those that wish to do the custom development and script repacking (at their own risk) ?

Would the peer to peer forum be more appropriate for this?

Thank you

[nabeel]

Hey @procos

If you wish to do custom development then I’d recommend you to review our guide here https://theme.co/apex/forum/t/customizations-best-practices/205

For the masonry library you can checkout the their documentation here https://isotope.metafizzy.co/layout-modes/masonry.html but as mentioned above we’re using a customized version of it so we don’t recommend editing it.

Yes you can get help from peer to peer forum in this regard.

Cheers!

[procos]

Hi @Nabeel,

thanks for the info.

Do you know if there are any plans to include the horizontalOrder parameter (mentioned in the link you sent) in future versions of X?

As that is the only modification we really need to achieve the desired layout.

Again, thanks for the help

[mldarshana]

Hi There @procos

Currently there’s no such information available for us. All those decisions are taken into consideration internally by our developers.

Thanks for understanding!