Get a Pinterest style ‘Masonry’ effect for WooThemes Canvas (with Infinite Scroll)

May 23, 2014

—

in Canvas by WooThemes, Canvas Extensions, Video Tutorials, WordPress

You can buy Masonry Blog now for $19 from the PootlePress store

When we started Canvas Extensions, one of the first ones we wanted to develop was a Masonry extension. It was one of the first ideas on our ideas board – and one of the most popular!

It works with the Magazine Template in Canvas (specifically the post grid feature) and allows you to have 2 3 or 4 columns for your posts. It has tons of options of what can be included and excluded from each post – so that you can great the perfect effect. One of the coolest options is Infinite Scroll – so your posts keep loading as you scroll down the page. It looks great on iPads and other tablet AND is mobile responsive.

In the video tutorial below, there is an example of how it works with our center logo and menu plugin to create a stunning travel blog site in less than 10 minutes.

As always, post any thoughts, suggestions or questions in the comments below!

Introduction

Step 1 – Setting up the magazine template

Step 2 – The Masonry Blog Canvas Extension

Step 3 – Setting up Infinite Scroll

Step 4 – Center the logo and menu and final styling

Comments

20 responses to “Get a Pinterest style ‘Masonry’ effect for WooThemes Canvas (with Infinite Scroll)”

James

May 23, 2014

Looks great. Is it responsive and if so, what is the behaviour? Do the multiple columns just stack down to one column?

Reply
1. Nick Burne
  
  May 23, 2014
  
  Hey James, yep it is repsonsive ; ) Currently it squeezes the columns together so you still get the effect. Otherwise you wouldn’t get the Masonry effect. Looks great. Let me know what you think. We could always add an option that disables Masonry and stacks the images in mobile news. Thanks for the input!
  
  Reply
Rob

May 23, 2014

Great news! I’ll be looking forward to the portfolio version appearing. I’ve been having to go to other themes like: http://pexetothemes.com/demos/porcelain_wp/masonry-layout-four-columns/ to enable me to get the look and feel clients are after. I’d much rather use Canvas for these sites as I prefer the framework.

Anyway, keep up the good work – any idea how long for the shop and portfolio versions?

Reply
1. Nick Burne
  
  May 23, 2014
  
  Hey Rob – next month for shop. For portfolio we’re thinking of integrating with the projects plugin as WooThemes are phases out portfolio. Thoughts??
  
  Reply
Rob

May 23, 2014

Just to add to that – one of the most useful features of the other themes I’ve been using is the ability to mix portfolios and posts on the same ‘magazine’ style page..!

Reply
1. Nick Burne
  
  May 23, 2014
  
  Great idea! We’ll definitely think about that. Maybe this is just one big masonry plugin?
  
  Reply
Ash

May 23, 2014

Looks really nice. When will this be available for portfolio? That would be a great idea. Also is this responsive? I noticed you changed the image size to get it looking right but what happens on the Ipad and other tablets?

Reply
1. Nick Burne
  
  May 23, 2014
  
  Hi Ash, great question. When I do the proper video demo of all the features, I will definitely show this. It currently just shrinks to fit the screen, whatever the size. This means that the masonry effect and infinite scroll effect still work. As per Jame’s comment below we could also add an option to remove these in mobile view. What do you think?
  
  Reply
  1. Ash
    
    May 28, 2014
    
    I think its fine as it is but the more options the better. I checked it working on jamiemarsland.co.uk looks very nice.
    
    Reply
Jordan Keats

May 24, 2014

Looks great – can’t wait for the Shop Masonry Extension!

Reply
Matt

May 26, 2014

Is there a live demo of the Masonry effect for WooThemes Canvas?

Reply
1. Jamie Marsland
  
  May 26, 2014
  
  Hi Matt,
  
  Yes there is 🙂
  
  Take a look at jamiemarsland.co.uk
  
  Reply
Tim Sharville

June 16, 2014

I just installed this and it’s excellent! I could do with responsive disabling though for mobiles as the titles do clash unless you go down to two columns in the settings but then it needs 3 – 4 columns on the big screen to look good. Is there a way to do this or would it be an update?

Thanks

Reply
1. Nick Burne
  
  June 16, 2014
  
  Hi Tim, I get what you mean and you could probably achieve this with some custom CSS (although not simple). We have a few requests for different features so will consider this for the next version. Not going to happen soon though. How are you at CSS?
  
  Reply
Tim Sharville

June 17, 2014

Thanks Nick, My CSS is ok for small fixes. What would you recommend? A browser detects that column switches from 3 down to stacked? If anyone fancies writing a custom CSS for this there is a beer in it for you;)

Reply
Andrea Reed

June 23, 2014

Hey Nick! Great stuff! Do you have anything that would display a BuddyPress activity stream in a Pinterest style with infinite scroll? Thanks for all you do! Andrea

Reply
1. Nick Burne
  
  July 21, 2014
  
  Great idea Andrea. Maybe add it to our ideas board? Here’s the link: http://pootlepress.uservoice.com/forums/238444-canvas-extension-ideas
  
  Reply
Andrea Reed

June 25, 2014

Hi Jamie,

I really want to buy this plugin now! However, I have one major question. Is it possible for me to amend a few settings in order to have this masonry, infinite-scroll effect for my BuddyPress activity feed? This is what I am really looking for, although these effects for the blog posts is very nice too.

Please let me know, as I would so much rather support you than have to move to another theme that I -think- can do this via ThemeForest. Canvas is just so lovely, I want to keep it all under that umbrella.

Thanks for all the great tutorials!

Andrea

Reply
1. Andrea Reed
  
  June 25, 2014
  
  Ack. Pregnant moment. Meant to say Hi Nick! 🙂
  
  Reply
Andrea

June 26, 2014

Hi again, I just purchased and followed all the videos. When my Reading settings – Front page displays is set to “Your latest posts”, the Blog page shows your masonry style as above and it’s lovely. However, the home page displays blog posts as well, in the standard format.

When I set Front page displays to: Front Page = Home and Post Page = Blog, then I get my Home page as directed, however the Blog page does not display in masonry style. It displays in the standard blog format.

I noticed in your tutorial that your home page also displays the blog posts in standard format. How can I have the lovely masonry style blog page while assigning my own static home page?

Thanks!! Andrea

Reply