Turn standard WordPress Gallery into an isotope Gallery

Isotope is a nice jQuery plugin to build galleries with.

With just a little coding you can turn a standard WordPress gallery into a nice responsive isotope-gallery. No WordPress-plugins needed.

Start by creating a standard WordPress Gallery: when editing a Page (or Post), press the Add Media icon, choose ‘Create Gallery’, pick your images, press the button ‘Create a new gallery’. Then, in the Edit Gallery view, change the settings of the gallery. If you want to add a Lightbox: for each image choose size ‘Full Size’ and add a caption and alt-info. Then finalize the gallery by pressing ‘Insert Gallery’.

Preview the Page (or Post) before you continue.

Next, switch the editor to Text-view so you can view the code of the content you are editing:

Your code should look like this (id’s will be different):

Next, add this piece of code:

<!-- load isotope: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<!-- activate isotope: -->
	// remove some default classes from the standard-Wordpress gallery (your gallery-classes might be different):
	$('.gallery').removeClass("gallery-columns-3 gallery-size-full");
	// set style for layout of the items:
	$('.gallery-item').css({"width":"20%", "margin":0, "padding":0});
	// activate isotope:
	   itemSelector: '.gallery-item', layoutMode: 'masonry'

That’s it.
Now preview the page (or Post).
The options in the code can be changed as you like. For instance to change the layout mode, you can change the piece of code layoutMode: 'masonry' to any other layout mode. Check out the possible values here.
Also, the number of items in a row is determined by the percentage of the total width of one gallery-item. In this line:

$('.gallery-item').css({"width":"20%", "margin":0, "padding":0});

you can change the percentage. Eg. to have four items in a row, change it to 25%.



Take care: if you switch from Text to Visual mode, WordPress will mess up your code (so stay in Text-mode). Also, do not add blank lines.


One might argue why should you add this kind of complicated code to a Post or Page? And not create or use a WordPress-plugin for this?
If you are going to use more gallery’s on your site, a plugin might be a better way to go. But good plugins with this kind of functionality are hard to find (for free). And for the sake of testing and exploring possibilities and combinations this is a quick way to go. Learning a bit of coding also can be a lot of fun!