Displaying Posts in Masonry Layout

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to use isotope.js to output a View with masonry layout?

Solution:
- make sure that isotope.js is available on the page where you add your View (if it is not added by your theme, you'll have to enqueue it yourself)
- set up a View so that it outputs a simple list of posts in card format
- follow the isotope documentation for how to instantiate isotope on this list of posts (https://isotope.metafizzy.co/#getting-started). You may need to edit the output of your View to make sure you have a container for the list of posts that isotope can be initialised on

100% of people find this useful.

This support ticket is created 6 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 2.33 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+00:00)

Tagged: Content Templates, Views plugin

This topic contains 1 reply, has 2 voices.

Last updated by Nigel 6 years, 3 months ago.

Assisted by: Nigel.

Author

Posts

August 15, 2018 at 6:22 am #1083563

jackC-7

Hi there,

The WordPress theme I am using has a built in Masonry layout for posts. But I want to recreate this layout for the new post type I have created using Toolset. They use isotope.js. Here's an example... hidden link

Is this doable in Toolset at all using views?

Thanks,
Jack

August 15, 2018 at 1:48 pm #1083765

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Yes, if you are willing and able to set up the isotope.js part of it yourself.

It's been a while since I used isotope, but essentially how it works is you have a page of markup with recurring elements (e.g. a list of posts in container divs or as li elements as part of a ul).

In the absence of isotope.js this would just present as a vertical list of cards (according to your CSS, which will need to specify the card width for each column).

On the DOM ready event you instantiate isotope.js, applied to your list of elements, and it then works its magic to update the DOM to display them in the masonry style.

So, you should be able to recreate this by:

- making sure that isotope.js is available on the page where you add your View (if it is not added by your theme, you'll have to enqueue it yourself)
- set up a View so that it outputs a simple list of posts in card format
- follow the isotope documentation for how to instantiate isotope on this list of posts (hidden link). You may need to edit the output of your View to make sure you have a container for the list of posts that isotope can be initialised on

Views has a few custom output formats (e.g. Bootstrap grid) but is mostly just a motor for spitting out HTML based upon the posts returned by a database query, and in a case like this your main concern is to make sure the HTML markup is in the format required by the 3rd party library.