WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

can someone help me to create a thumbnail gallery in Wordpress using jquery masonry which looks similar to this?

I am not sure what the best approach is. Especially regarding the different thumbnail sizes. When and how to assign them? I get the part where I set a few different thumbnail sizes, but how do I decide which size to load? Since that page always loads the same way it doesn't seem to be randomized. Can the masonry script take care of that itself?

Thanks a lot for your help!

share|improve this question
I usually set up my image sizes then within each post I have a metabox with a radio button group to select what image size I want to use within my masonry grid. When displaying my posts I check for the meta value and then grab the appropriate image. – Dale Sattler Oct 4 '12 at 8:53
up vote 1 down vote accepted

Make a grid setup, with your guttering, and setup JQMasonry to appyl itself to everything in that grid.

Then add image sizes for the sizes of tiles you want using add_image_size in functions.php. You will need to regenerate any existing image thumbnails after this has been done.

Then finally display your posts. Use div elements sized to the right tile size, containing the featured image of the associate tile size.

How will you pick the size? Well aside from picking ti manually in some post meta, you can use the trusty random PHP functions:


So if you've got 3 tile sizes ( like the page you linked to ), use rand to generate a number between 1 and 3, then have an array with your tile sizes and pick one:

$tile_sizes = array('small','medium','big');
foreach post
    $random_size = rand(0,2);
    $chosen_size = $tile_size[$random_size];

Also if using WP_Query or get_postsYou may also want to set a random order when you make your query to further randomise things

share|improve this answer
Thanks. So it is safe to assume that in the linked example, the thumbnailsizes are not randomized but manually set for each picture? Reload the page, everything stays the same. – Dreamingof8a Oct 4 '12 at 6:24
Yes, though there's no reason they couldn't be – Tom J Nowell Oct 4 '12 at 8:59
Finally got around to check back. Thanks for the input, I ended up adding a custom field to the attachment edit screen where I can set one of several thumbnail sizes for each image individually. – Dreamingof8a Nov 27 '12 at 11:25

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.