0

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!

Improve this question
1
  • 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, 2012 at 8:53

1 Answer 1

Reset to default
1

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:

http://php.net/manual/en/function.rand.php

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

Improve this answer
3
  • 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, 2012 at 6:24
  • Yes, though there's no reason they couldn't be
    – Tom J Nowell ♦
    Oct 4, 2012 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, 2012 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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