[Resolved] Views : I would like to set up a Masonry type grid for my testimonial page

[Author]

Posts

[Fumie Toki]

Tell us what you are trying to do?

I would like to set up a Masonry type grid for my testimonial page using Views plugin. I've tried to look up other posts in this forum but couldn't quite get the answer. For now, I have used unformatted and boostrap grid option but the height of the images are not equal and the layout does not look so good. I don't know how to get the Mansory grid effect.

Is there a similar example that we can see?
Here is the page that I had set up on a test site, where it's just set up as a 2 column page, in HTML.
hidden link

What is the link to your site?
hidden link
hidden link (testimonial page)

[Nigel]

If you want an actual Masonry grid that would mean using a library such as the original hidden link, enqueuing the required files and modifying your markup to match its requirements.

It is well documented, but to help get you started I created a simple masonry grid on my own site using it.

You can how the output of my View is configured in the screenshot.

- I included a script tag to add the masonry library (normally you would use WordPress enqueuing, but if this is the only place the masonry library is being used, this should be okay)
- I added a wrapper div (with class "grid") outside the wpv-loop tags so that it is added only once, and it includes data-attributes to initialise the masonry library when loaded
- inside the wpv-loop tag I include one dummy div (class = "grid-sizer") used for proportional sizing, as required by the library
- next is the div with class "grid-item" which will actually contain the content
- the size of the cards/number of columns is determined by the CSS, which I included in a media query so that on smaller screens the grid collapses to a single column. This is the part you are likely to want to modify.

[Fumie Toki]

Hello Nigel

Thanks so much for your help. I am not much of a coder so I can't fully grasp everything but I tried your script on the VIEWS. So the items do display and I tried with the following CSS on .grid-item, .grid-sizer
float: left;
width: 50%;
but each boxes just stacks up normally as if it was a normal row with 2 columns in each, not as masonry grid... What I am missing ?

Also, if I want to use it in different areas, should I enque the script in the function.php file ? If so, what is the enque script ?

Thanks so much

[Nigel]

I'm seeing quite a few JS errors on the page, so it's unlikely the masonry script is able to work.

Also adding the float to the CSS will likely give unintended results.

To enqueue the Masonry library so that it can be used elsewhere you should delete where you inserted the script tag, and then add the following as a code snippet (at Toolset > Settings > Custom code) or in your theme's functions.php file:

add_action( 'wp_enqueue_scripts', 'ts_enqueue_masonry' );
function ts_enqueue_masonry( ){
    if ( !is_admin() ){
        wp_enqueue_script( 'masonry', '<em><u>hidden link</u></em>', array( 'jquery' ), null, true );
    }
}

You can then apply the Masonry layout with this technique anywhere on the front-end.

But first you need to eliminate the JS errors on the page.

I suggest you disable any other JS you are adding and then check that the masonry effect is applied.

[Fumie Toki]

Thanks

So I did remove the float property, disabled on plugin which seems to have been creating a js error, and enqued the Masonry library in the function.php file. And I am getting a one column layout in 50% width, not stacking up as in Masonry.

Just so that it is clearer, I made another page with only this one view displaying.
hidden link

The only JS error that I am getting now seems to come from the VIEWS plugin, but I don't have any other js script tags in this View.

[Nigel]

Could I check your site myself?

Let me mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[Nigel]

There is a JS error on the page before the error coming from Views, and once one error appears it can trigger other errors, so until that first error is resolved I can't say anything with confidence about the subsequent errors.

It looks like it's related to Facebook.

I'm not sure if this site is live, is it okay to disable plugins while testing?

[Fumie Toki]

It is a live site, I have just created a staging site here I can send you the info in private

[Nigel]

Thanks, here's another private reply set up.

[Fumie Toki]

Test page is here : hidden link

[Nigel]

Sorry, I had too many problems working on your site, it uses many plugins and a theme with lots of customisation etc. I noticed some typos in the markup for the View that you were using and edited those, but it didn't resolve the problems.

So I have instead created an online demo with this working: hidden link

You can visit the backend with this link: hidden link

You'll find a code snippet at Toolset > Settings > Custom Code that enqueues the masonry script.

The View is here: hidden link

You'll note that I switched to using jQuery instead of data-attributes to initialise the masonry layout, as I found sometimes the masonry layout wasn't applied until I resized the browser.

In the View you'll find an example of the markup required, the custom CSS, and the custom JS.

[Nigel]

Sorry, I had too much trouble working on your site, it uses a theme with lots of customisation etc. I noticed some typos in the markup for the View that you were using and edited those, but it didn't resolve the problems.

So I have instead created an online demo with this working: hidden link

You can visit the backend with this link: hidden link

You'll find a code snippet at Toolset > Settings > Custom Code that enqueues the masonry script.

The View is here: hidden link

You'll note that I switched to using jQuery instead of data-attributes to initialise the masonry layout, as I found sometimes the masonry layout wasn't applied until I resized the browser.

In the View you'll find an example of the markup required, the custom CSS, and the custom JS.

[Charles]

Nigel,

Can you share the HTML, CSS & JS you implemented for this? I would to incorporate a masonry layout for Posts displaying a custom field w/link and random sort.

Thanks,
Charles,

[Nigel]

Sorry Charles, those links were to a temporary staging site which no longer exists.

If you need support setting up a masonry gallery please open a new thread, though you may be pleased to know we are adding support for masonry layouts (plus others) in Blocks: there should be a beta available very soon, hopefully this week, keep an eye on the blog for an announcement.