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

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)”

  1. James Avatar

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

    1. 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!

  2. 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?

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

  3. 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..!

    1. Great idea! We’ll definitely think about that. Maybe this is just one big masonry plugin?

  4. 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?

    1. 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?

      1. I think its fine as it is but the more options the better. I checked it working on jamiemarsland.co.uk looks very nice.

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

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

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Matt,

      Yes there is πŸ™‚

      Take a look at jamiemarsland.co.uk

  7. Tim Sharville Avatar
    Tim Sharville

    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

    1. 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?

  8. Tim Sharville Avatar
    Tim Sharville

    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;)

  9. 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

    1. Great idea Andrea. Maybe add it to our ideas board? Here’s the link: http://pootlepress.uservoice.com/forums/238444-canvas-extension-ideas

  10. 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

    1. Ack. Pregnant moment. Meant to say Hi Nick! πŸ™‚

  11. Andrea Avatar

    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

Leave a Reply

Your email address will not be published. Required fields are marked *