jQuery Masonry and WordPress Galleries

UPDATE: Version 3.0 released!!! Now includes neat features like hover captions and Lazy Load!

I’ve created a WordPress plugin called jQuery Masonry Image Gallery that puts all of this functionality into a simple to install and update WordPress plugin. Download it from the WordPress plugin repository.

Demo

WordPress 3.9 comes comes bundled with the latest version of Masonry 3. This version, for the most part, works just the same as the previous version since it’s a custom WordPress build that comes bundled with the ImagesLoaded plugin.

There are a couple of good changes . First, all the jQuery animation was removed in the latest version. This makes the plugin’s weight much lighter. The light weight is a good thing for most everyone since this update only effects Internet Explorer 9 and below.

The plugin can now also be fired up with vanilla JS. This increases efficiency for a better loading experience.

If you are using WordPress 3.9 or above:

  1. Create a .js file with your Masonry setup someplace in your WordPress theme. It should (at a minimum) look something like this, but there are plenty of options on the Masonry site:
    var galleries = document.querySelectorAll('.gallery');
    for ( var i=0, len = galleries.length; i < len; i++ ) {
      var gallery = galleries[i];
      initMasonry( gallery );
    }
    function initMasonry( container ) {
      var imgLoad = imagesLoaded( container, function() {
        new Masonry( container, {
          itemSelector: '.gallery-item',
          columnWidth: '.gallery-item',
          isFitWidth: true
        });
      });
    }
  2. Then you will want to include the js file you just created in your theme’s functions.php file. If you already enqueueing scripts, then merge this into your function:
    function jmig_js() {
    			
    			global $post;
    			
    				if( has_shortcode( $post->post_content, 'gallery') ) {
    					
    					wp_register_script('masonryInit',
    					get_stylesheet_directory_uri() . '/js/custom_script.js',
    					array('masonry'),
    					'2.1.6', 
    					true);
    		      
    						wp_enqueue_script('masonryInit');
    						
    				}
    	  
    		}
    			
    			add_action( 'wp_enqueue_scripts', 'jmig_js');
    
  3. I would also recommend assigning a set width to the .gallery-item class. I typically match this style to the thumbnail width specified in Settings -> Media. If you have your thumbnail width set to 200px, then add this code to your child theme’s style.css file:
    .gallery-item {width: 200px !important}
  4. That’s pretty much all you have to do. You might want to mess around with the Masonry options and CSS for the best look. There are plenty of examples and code snippets on their site.

Please note that if all of your thumbnails are cropped to exact dimensions, then this really isn’t necessary. This works best if you are using different size thumbnails.

Demo

If you are using WordPress 3.8.x, 3.7.x or 3.6.x:

  1. Create a .js file with your Masonry setup someplace in your WordPress theme. It should (at a minimum) look something like this, but there are plenty of options on the Masonry site:
    (function($){
    	var $container = $('.gallery');
    		$container.imagesLoaded(function(){
    			$container.masonry({
    				itemSelector : '.gallery-item',
    				isAnimated: true,
    					animationOptions: {
    						duration: 250,
    					 	easing: 'linear',
    					 	queue: false
    
    					 },
    				isFitWidth: true
    				});
    			});
    })(jQuery);
  2. Then you will want to include the js file you just created in your theme’s functions.php file. If you already enqueueing scripts, then merge this into your function. If you are using WordPress 3.6 or later, we should utilize the new has_shortcode conditional statement and it should look something like this:
    //Inject Theme Dependent jQuery plugins
    function my_scripts_method() {
    
    	global $post;
    
        	if( has_shortcode( $post->post_content, 'gallery') ) { 
    
            	wp_register_script('masonryInit',
    			get_stylesheet_directory_uri() . '/masonry-init.js',
    			array('jquery','jquery-masonry'),
    			'1.0', 
    			true );
    
       // enqueue the script
       wp_enqueue_script('masonryInit'); 
    
       		}
    
    }
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');
  3. I would also recommend assigning a set width to the .gallery-item class. I typically match this style to the thumbnail width specified in Settings -> Media. If you have your thumbnail width set to 200px, then add this code to your child theme’s style.css file:
    .gallery-item {width: 200px !important}
  4. That’s pretty much all you have to do. You might want to mess around with the Masonry options and CSS for the best look. There are plenty of examples and code snippets on their site.

Please note that if all of your thumbnails are cropped to exact dimensions, then this really isn’t necessary. This works best if you are using different size thumbnails.

Demo

81 thoughts to “jQuery Masonry and WordPress Galleries”

    1. It should still work if the site is using the Classic Editor. It does not, and will not, work with new Gutenberg block editor. Thanks!

  1. Nice gallery and i have used in one site which is http://www.sgol.co.il/ . Gallery is loading perfectly but here is a jquery error while closing the popup from the carousel effect. After getting the jquery error, entire page is stuck and not working any of other images/links

  2. First everything worked fine, beautiful way to show my work. I do not know what happened, but now the loading time is very slow and there are gaps between the pictures. I tried to deactivate several plugins to see if one causes the problem, but couldn`t find a solution. Do you have any suggestion?

    1. Hey! If you are still having issues, then please shot me a link in a reply to this comment. I’ll take a look at it for you.

      1. Hey! If you are still having issues please shoot me a direct link to the page with the gallery. I can take a look at it. Thanks!

  3. Hi, first thank you for this great plugin.

    I have a responsive Media Query question. When viewing a gallery on a smartphone “Portrait” view, the gallery becomes (1 column) which can make scrolling down through images “very long” if there are a lot of photos in the gallery.

    Do you know of a CSS Tweak where I can make the gallery display as (2 Columns) in “Phone Portrait” view? This would reduce scrolling length by 50% and make it more user friendly in cases like this. I do not mind the thumbnails being smaller.

    Thanks again!

    1. Hey! Two things, if you are using JetPack Tiled Galleries, then you probably wouldn’t need this plugin. The thumbnails probably looks so small because you are using the default thumbnail width and height. Have you tried adjusting those sizes and regenerating your thumbnails?

  4. I love the plugin but i have to refresh the page in order for it to work. Is there a way to avoid doing that?

    1. Hey. It should work on page load. If you can provide a link, I will be happy to look at your page and diagnose the issue. Thanks!

    1. Hmmm…I’m still seeing that the CSS the would define the width of your thumbnails is still being included in your code. Do you want four columns all the time, or just at max width?

      1. No, I don’t necessarily need to have 4 columns all the time. That’s just an example. When I try 4 columns with medium size images, I get this: http://www.bouchetimages.com/test-masonry-gallery/

        I managed to make it work on this page with a very specific size of images (http://www.bouchetimages.com/jobs/arjun-first-birthday-party-02-2015/) but it doesn’t work well when the images are smaller. Not sure why…

        Do you know if by change, it is possible to open the image in lightbox? As it is now, if the image is not large already in the gallery, when people click on a picture, they have to go back to the gallery page and scroll down to find where they were.

        Thanks!

        1. Hey there,

          This plugin pulls in the thumbnail width and applies the width as CSS. Also, Masonry only really works well with equal width thumbnails, but different heights. If you want to combine different widths and different heights, I would recommend a different jQuery library.

          The JetPack plugin has a gallery option for tiled and that I really think that plugin should work better for you.

          Also, you can use any lightbox plugin with Masonry. Just make sure your galleries link directly to the image file and not the attachment page.

          Thanks!

  5. Hi Will,
    Your plugin looks great and I think it could do exactly what I want.
    However, when I insert gallery in a blog post, the only layout I get is this: http://screencast.com/t/BYrBQzBWiQ0
    I modified the number of columns and played with the boxes in JMIG Options.

    The best I get is this http://screencast.com/t/CJFomRo35sY when I check both boxes.

    Looks like something is conflicting with your plugin. Do you have any idea where I should look or what I should modify?

    Thank you!

    1. Hey, I think you are right, it does look like a conflict. Any way I could see the page in a browser to debug and troubleshoot.

      Thanks!

  6. hi, Will
    nice work though.
    I’m right now working on my new photography portfolio website with masonry and WordPress 4.1..
    got this one for ya, how do i accomplish the layout something like this on here: http://erikjohanssonphoto.com/work/imagecats/personal/
    do i have set the width to every thumbnail or masonry could do it by itself like the other plugin Freewall.js?( I’m also thinking bout using it…. )
    looking forward to your reply.
    thx!

    memphis

  7. Hello,
    I am running the latest version of wordpress. i’ve just installed and activated the plugin.I created a gallery and everything seems all right, except that when I modify the number of colums and image size it always stays the same, no matter what parameter I choose. Any idea on where should I start investigating?

    Thanks a lot and great job! 😀

    1. Go to the WordPress Dashboard, then go Setttings -> jMIG Settings. Then check “DO NOT allow jMIG to layout your gallery columns?”. That should help resolve the issue. However, you might have to do some CSS magic to get it all lined up correctly depending on your Theme.

      Thanks!

  8. Hi,
    I am using WP 3.9.2 and jquery-masonry 2.2. I have problems with blurred thumbnails, as someone also stated before – but I don’t see any workaround in my case.

    After having added a gallery, using any thumbnail size (in Settings-Media) and allow jMIG to layout gallery columns, the thumbnails are blurred. Please note that I regenerate thumbnails immediately after any size change.

    Instead, if on the same gallery I dis-allow jMIG to layout columns, thumbnails become perfect. Which I would avoid, since I loose the spacing between thumbs.
    I tried to change theme and browser, but nothing changes.

  9. Hey, love this layout! How do I get the enlarged image and option to click through the gallery after I have clicked on an image on the masonry lay out? When I click on an image, it says the page cannot be found. Your demo shows a “slide show” kind of option… how do I get that? Thanks!

  10. Thanks, this is really cool!
    A new problem appeared though, When I upgraded to the beta version my thumbnails are suddenly in poor quality, or is it another setting that I have missed to do?
    Thanks again for the support, Marie

    1. Hmmm. The thumbnails still look great to me! Upgrading to the beta version should not change any image quality. Could you send some examples? Screenshots would help!

    2. Oh wait! The thumbnails are being stretched by 40 pixels. I see that now in the code. What are your thumbnail dimensions set in Settings -> Media?

      1. Yes, miniatures 240×240, medium 300×300, large 1024×1024. I chose 240×240 for a perfect fit in size in the screens. That may be causing the stretch?
        Thanks for your attention/Marie

          1. It seems to be working fine for me in Safari. Could you please describe the problem some more or attache some links to screenshots? Thanks!

            1. Hmmm…The first load takes a little time because of all the images, but they do fade in. Not sure what’s going wrong for you. What version of Safari are you using?

            2. 6.1.3, I agree, the first it doesn’t load for me. No probs in other browser though and not in cell-phone either.

        1. Set your thumbnail (miniatures) width to 240 x 9999 and install a plugin called Force Regenerate Thumbnail. Run the plugin once it’s installed and that should fix your thumbnail issue.

            1. Unfortunately no… tried to create a new gallery too but same result.
              is there another way to overcome? (upgraded safari, works fine now!)

            2. You could run the Force Regenerate Thumbnail plugin or go into your Media settings and set the thumbnail width to 200px.

        1. If you go to Dashboard, Settings -> JMIG Options, then there will be a box to input image margins at the top.

  11. Wonderful job on this plugin! Beautiful, clean and simple to use.

    I am trying to add share buttons (pinterest, twitter, facebook) on mouseover and, even though I found some great plugins that achieve this goal for images, they don’t work for wordpress native gallery and jmasonry. Do you have any recommendations? thanks so much!

    1. I was able to add share buttons on hover using the Slingpic plugin. I had to change two options in the Slingpic settings to get it to work. First, on the Slingpic settings page look for “Choose which images show Slingpic based on a class name.”, and then add in attachment-thumbnail as the class. Then make sure that the Minimum image width and Minimum image height are low enough to match your thumbnail width and height.

      It worked for me, I hope it works for you!

  12. Hi Will,

    I have installed your plugin and it looks like it’s pulling images in masonry, but the layout on my page is off and there are gaps between the bricks. I am probably missing something… will appreciate your help on this.
    page

    1. It looks like the Masonry javascript isn’t being pulled in at all. Have you included wp_footer(); right before your tag?

      1. ah! wp_footer() was the missing link. Thanks for your attention. I’ll pay it forward.

        For anyone else with the same problem, I pulled this from the codex:
        <?php
        /* Always have wp_footer() just before the closing
        * tag of your theme, or you will break many plugins, which
        * generally use this hook to reference JavaScript files.
        */
        wp_footer();
        ?>

        1. Great to hear that solution fixed your problem! If you have a minute, I’m asking people to beta test the new version of the plugin, would you be interested?

  13. Hi Will,

    I am using WordPress version 3.9. I have X-WordPress Theme and I just installed you plugin “jQuery Masonry Image Gallery, Version 2.1.6”. Where do I get access to it? Nowhere to be found. The access I could find is the Settings > “JMIG Options”. There has to be a simple way to add media and content to the masonry layout. I must be missing something, I need help.

  14. Hello,

    I’ve installed the plugin and created a gallery, but it doesn’t seems to work…
    What did I miss ?

    Thank you

      1. Unfortunately i work on local, the site is not on a remote server for the moment.
        I run the latest version of WP, do I have to change settings for thumbnails or images somewhere ?

        1. The plugin works much better without 1:1 scaled thumbnail images. I typically set up my Media preferences so that the thumbnail width is around 150 and the height is 9999. Then I would run a plugin like Force Regenerate Thumbnails to resize all the images that have already been uploaded.

            1. The WordPress 3.9 update does not break this plugin. I’ve actually updated the plugin a little bit to run better on 3.9. It also still maintains backwards compatibility back to version 3.5

          1. Perfect! Thank You. =) That works great. =) Do you have a recommendation of pixel sizing so that I can fill the whole width of the column with the cool masonry look.

  15. Thank you so so much for your help! Yes, it does work :))

    Was wondering if you could help me with two last issues:
    I was trying to use the gutter layout from here: http://masonry.desandro.com/options.html , but when I put the html in body and css in customized css, it doesn’t seem to work on my page as the images from the second row don’t align under top images, instead, they form a new row breaking the masonry layout. i don’t even know how to approach it.

    Also, is there any way that after the page loads, i can make the images to load immediately in masonry layout instead of them first displaying in standard wordpress layout and then, in front of my eyes, rearranging in masonry? Maybe there is some error with my site I am not aware of?

    Thank you again for your amazing help! incredibly appreciated!!!!!

    1. Hmmm…could you please send me a link to the site you are working on? It would help me out with the troubleshooting. Thanks!

  16. Hello,

    I have been looking for masonry plugin to display my gallery so I am thrilled to find yours. I am a beginner with wordpress and having little issues running properly.

    I have installed the plugin and I don’t see any images displaying on my gallery page. What do I do? Do I need to add css code and html on page? Which cod should I add? Do I need to add some java too? Also, how can I add share buttons to images while I point a cursor on image? Please please please help! Thank you.

    1. WordPress Image Galleries can only link to None, Media File or Attachment Page. I’m not sure if there is a way around this limitation. You can always put your links in the image caption.

    2. Hi, congratulations for your plugin, I installed it on my WP (3.6.1 version) website gallery homepage. Actually, I only installed the plugin and it works very well, despite the fact that the images load slowly. I did not create a js file, or add the code you noticed above. Is this what I should do ?

Leave a Reply

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