Using Masonry in Genesis for a Pinterest like layout

Did you know that jQuery Masonry script comes in-built with WordPress? We just need to enqueue to use it. In this article I explain the steps to implement jQuery Masonry script to display Posts in Posts page and archives similar to Pinterest.

Live Demo

Note: I have tested this in Genesis Sample child theme and the process should work in any other Genesis child theme with minor adjustments.

Screenshot:

Masonry-Demo-Pinterest-layout-in-Genesis-no-infinite-scroll

Set excerpts to be shown

At Genesis > Theme Settings > Content Archives select Display post excerpts.

Screen Shot 2013-09-15 at 7.36.10 PM

Prepare for jQuery Masonry initialization

Place the following in a file named say, masonry-init.js under js (create, if it does not exist) directory in active theme:

1 2 3 4 5 6 7 8 9 10 11
jQuery(function($) {
var $container = $('.content');
 
$container.imagesLoaded( function(){
$container.masonry({
itemSelector: '.entry',
isAnimated: true,
gutterWidth: 40
});
});
});
view raw gistfile1.js hosted with ❤ by GitHub

In the above we are specifying .content div as the masonry container and .entry as each masonry brick. gutterWidth is the value in pixels of the horizontal gap between the Post blocks.

[Optional] Infinite Scroll

If you would like next set of Posts to load automatically as the visitor scrolls down, download jquery.infinitescroll.min.js from here. Upload it to /js directory under the child theme. Also create a file named say, infinitescroll-init.js under child theme’s /js having this code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
jQuery(function($){
var $container = $('.content');
 
$container.infinitescroll({
navSelector : '.archive-pagination', // selector for the paged navigation
nextSelector : '.archive-pagination .pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.content .entry', // selector for all items you'll retrieve
loading: {
finishedMsg: "<em>No more posts to load.</em>",
img: 'http://websitesetuppro.com/demos/genesis-masonry/wp-content/themes/genesis-sample/js/images/loader.gif',
msgText: "<em>Loading the next set of posts...</em>",
speed: 'fast'
},
},
 
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
view raw gistfile2.js hosted with ❤ by GitHub

In the above the only value that may want to change is the URL of loading indicator image, loader.gif. Download it, upload to your server and use that URL.

Enqueue the scripts and set up the layout

Add this in child theme’s functions.php:

If you do not wish to use Infinite scroll, comment out or delete the two enqueue lines under //* Infinite Scroll.

In

add_image_size( 'masonry-brick-image', 255, 0, TRUE );

change 255 to width of each post (which is dependent on how many columns you want in the available space).

Here’s the formula to calculate the width of each post:

((no. of columns) * x) + ((no. of columns – 1) * gutter width) = “.site-inner” width

Ex.: Let’s say you want 4 columns and you’ve set the gutter width to 40px and the available space of .site-inner div is 1140px (can be obtained from Firebug), then

4x + (3*40) = 1140

i.e., x = (1140 – 120)/4 = 255.

Note: This step is not mandatory. If 0 is entered when defining the “masonry-brick-image” custom image size handle, full width of the image will be used. The benefit of setting the post thumbnail image width to only how much is actually needed (that is the container in which it is shown) is faster page loading time due to decreased image file sizes.

Add the styling

Add the following sample CSS code at the end of child theme’s style.css and adjust to suit:

Set the width of .masonry-page .content .entry to width of each post as calculated from the formula earlier.

Regenerate Thumbnails

Install activate and run Regenerate Thumbnails.

That’s it!

References:

  1. http://surefirewebservices.com/development/genesis-framework/using-the-genesis-featured-image
  2. http://designsbynickthegeek.com/tutorials/genesis-explained-image-functions

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 397 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    Thanks for this! I’d been working on a similar project and was using a large js file to set up Masonry, which seemed excessive since I was enqueuing it as dependent on Masonry. I’d already set up my widgets and styling as I wanted and you helped me simplify the js end. Thanks!

  2. Marsha says

    I am in the process of setting this up on my website but having an issue with it covering my category description & breadcrumbs. How can I fix this?

    Thank you so much for the tutorial. I’ve been thrilled with what you are teaching.

  3. Samantha says

    Love this. Thank you so much. I’m not great with coding so this is a lifesaver. I have one question – could you provide the coding necessary to add a right sidebar? Or at least point me in the correct direction. Thanks again!

  4. Samantha says

    I’m trying to add a featured area above the posts. If I add it to genesis_before_loop it shows up behind the post content. If I add it in genesis_before_content it shows up above both the posts & the sidebar (I do not want it above the sidebar). Is there a way to add it above the posts without moving the sidebar down?

    Really love the masonry layout & it was SUPER easy to implement. Thanks!

  5. Mike says

    This was a great help! I managed to get everything working except the infinite scroll function. I copied everything exactly as you wrote, but for some reason it does not respond. Could it be that the selectors have changed slightly since you wrote this?

    I would appreciate it if you could offer a working genesis child theme with this functionality implemented so I could troubleshoot this problem, or if you could double check on how to implement the infinite scroll. Thanks so much!

    • says

      No, nothing has changed. The code is still relevant.

      I suggest you give it a try again and let me know. I can then share the child theme with the functionality built-in if needed.

          • Mike says

            Thanks for offering the download. It enabled me to rule out miscoding on my part.

            The theme you offered for download did not work initially, and I discovered that infinite scroll does not work when the Genesis setting ‘Post Navigation Technique’ is set to ‘Previous / Next’. It must be set to ‘Numeric’ in order for infinite scroll to work. Any thoughts on why this might be?

          • Mike says

            I figured this out. The selector in the infinite scroll initialization file is specific to numeric listing only.

            nextSelector : ‘.archive-pagination li.pagination-next a’,

            should be:

            nextSelector : ‘.archive-pagination .pagination-next a’,

            This way both numeric and next/previous settings work.
            Cheers!

  6. J says

    Hello Sridhar, I’ve been looking for this one, thanks in advance for the tutorial. I have yet to implement it coz I have to test it in my localhost first. We already have a blog site set up, but I’d like to apply masonry to a page template or custom post type. Some of the items indicated to be placed on my the functions.php file are already on my functions.php file, and I am wondering if that will create any conflict. I am still studying Genesis, and I am loving it so far. Thanks for the advice.

  7. Scot says

    Great work! Would you agree the sample theme provided needs some tweaking for responsive design? I’m seeing a few glitches on smaller devices for example.

  8. Elle says

    Hi just wondering if you can use various width images instead of always the same width? What parameter would I need to change to do that? Some of my images would need to span 2 columns instead of just 1. Thanks in advance

  9. says

    Awesome tutorial Sridhar! Thank you so much. However, I would really love this layout with all the images cropped with the same dimensions. How is this possible without resizing all my featured images in my media library?

    Is it possible to have various sizes of images in the media library, but display them hard cropped with the same dimensions, about 350x240px, in a 3 column layout without the images distorting??

    I am willing to sacrifice a random cropping of the images as long as they are of the same dimensions, full column width, without distortion?

    Will you please help me accomplish this?

    Thanks much,
    Mark

  10. says

    Sridhar, this is probably asking for the world, but is it possible to create a masonry page like you describe above but only for a specific category page instead of the home page? Thanks.

  11. Gabriel says

    Hi Sridhar,
    First thanks for this nice implementation.
    However there seem to be a recurring issue with infinite scrolling and the way post are queried:
    in case one choose any option than just chronological, the infinite scrolling behave quite weird. For example by randomizing the order, post are duplicated. Choosing a different meta seems to completely break infinite scrolling.
    Do I miss something?

  12. says

    Hi Sridar, this is awesome, I’m deploying it on my latest site.

    I hope you don’t mind but I’d like to point out a missing ‘;’ on line 80 – it should read zoom: 1;

    The code will work fine in normal circumstances, but when the site is being built using SASS the code won’t compile without that semi colon.

    Thanks for all your tuts, you’re doing great stuff!!

  13. Annabel says

    Hi Sridhar,

    Thank you for this wonderful tutorial, and the others on your archive – you are helping me learn so much.

    I’m wondering if it would be possible to create a masonry effect like above but only for search results/category pages rather than for the blog/homepage.

    Ideally i would like my blog to remain more traditional with full text posts rather than post excerpts.

    Hope that makes sense! Thanks again!
    Annabel

  14. says

    Hi Sridhar,
    Thanks for posting this. This is exactly what I was looking for.
    Question: I’m using the Magazine Pro theme. I’ve adjusted the code to only appear on the Shop by Occasion category but it seems to be affecting my home page layout. I’m not a coder by any means – could you give me some tips on how to fix this?

    Thank you!

Trackbacks

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>