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:
- 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 }); }); } - 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'); - 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} - 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.
If you are using WordPress 3.8.x, 3.7.x or 3.6.x:
- 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); - 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'); - 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} - 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.
Can this plugin be used in the latest version of WordPress?
Thanks
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!
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
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?
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.
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!
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!
Nice plugin but the thumbnails are tiny! So small. Could it be because I have Tiled Galleries activated (Jetpack)?
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?
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?
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!
Hi!
By any chance, did you figure out what is going wrong with the page/
Thanks!
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?
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!
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!
Thank you for the information! That’s good to know.
Thanks again for taking the time to answer my questions.
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!
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!
Absolutely! Here is the link: http://www.bouchetimages.com/test-masonry-gallery/
This is what I get when the boxes are not checked and the number of columns is set to 4.
Thanks so much!
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
Hey man,
That’s a pretty badass layout! I personally find that Masonry works best when widths are equal, but heights are not. It’s possible to use Masonry with different thumbnail widths, but I think it’s probably not the best route to go for the look you want.
Freewall.js looks really cool (might have to try it out!), and there is also a gallery component to the Jetpack plugin (tiled gallery) that has the same sort of look.
Good luck!
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! 😀
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!
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.
Hmmm…I would love to take a look at it. Could you please provide a link to your site?
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!
Hey Vanessa! I use the Gallery Carousel Without Jetpack plugin to get that light box effect. It’s really easy to set up, just make sure that your gallery images are linking to the image files and not the attachment pages. Good luck!
You are freak’n awesome!!! Yes!! It worked and it was very easy… Thank you so so much!
Awesome! You are very welcome!
Thanks Will, I decided to do that. Looks perfect now.
Awesome! Great news!
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
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!
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?
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
While I’m at it, do you know why it doesn’t work in safari?
Thanks for your attention, Marie
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!
Yes, the first time I am navigating to the page the first page is empty, it was not for you? http://bildspel.thres.com
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?
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.
Yeah, I’m not sure. It’s running totally fine in Safari 7.0.4.
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.
Actually it did not work (!) thumbnails still low res…
Hmmm. That should of worked! Did you just install the plugin, or run the plugin? This YouTube video should help! http://www.youtube.com/watch?v=-V_9vDOX_ng
Unfortunately no… tried to create a new gallery too but same result.
is there another way to overcome? (upgraded safari, works fine now!)
You could run the Force Regenerate Thumbnail plugin or go into your Media settings and set the thumbnail width to 200px.
Hi. the Masonry is working beautifully and it is pure joy to use.
I would like to increase the horisontal space between my images in the gallery, how can I do this?
thanks for your attention, Marie
It looks like the theme’s CSS is conflicting with the plugin a little bit.
I would recommend downloading and installing the beta version of this plugin. It should help realign all the thumbnails. You can download the plugin here: https://github.com/phoenixMag00/jquery-masonry-image-gallery/archive/master.zip
Oh, thanks, that works better. Nice. Would it even be possible to adjust the spacing?
Thanks for your attention. Best, Marie
If you go to Dashboard, Settings -> JMIG Options, then there will be a box to input image margins at the top.
It worked for me as well. thank you so much for the advice.
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!
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!
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
I must be having some sort of collision of scripts, and the images just aren’t loading when the plugin is activated. Any tips? Front page of http://nickgreen.info/anchor/
It looks like the Masonry javascript isn’t being pulled in at all. Have you included wp_footer(); right before your tag?
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();
?>
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?
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.
The plugin uses WordPress galleries. Learn more on how to use them on the Gallery Shortcode codex page.
Hello,
I’ve installed the plugin and created a gallery, but it doesn’t seems to work…
What did I miss ?
Thank you
Hmmm. Do you have a link I could look at to help you with the issue? Thanks!
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 ?
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.
I’ve read that WP now includes Masonry v3, could it break your plugin ?
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
Do I need to resize my images. My old posts don’t seem to respond to the j-query masonry, however the new ones look awesome! =)
Did you happen to change the thumbnail size in Settings -> Media in the WordPress Dashboard?
I have tried that, but it didn’t edit the size of the previous posts.
That makes total sense. I recommend running the Regenerate Thumbnail plugin or the Force Regenerate Thumbnail plugin.
Once you run the plugin, then your gallery thumbnails should all look awesome!
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.
Do you have a link I could look at?
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!!!!!
Hmmm…could you please send me a link to the site you are working on? It would help me out with the troubleshooting. Thanks!
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.
Hey There,
What does the short code look like on your gallery page? It should look something like this: [gallery]
As for the sharing part, there are probably a few tutorials or plugins out there that can help you accomplish image sharing. I would maybe try a plugin like this: http://wordpress.org/plugins/gallery-share/
How do I get the images to link to another page?
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.
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 ?
If you are using the plugin, then you do not need to do anything else.