Adding the "Masonry Style" to Posts
Usage
This style displays posts with roll over featured images. It can use any category and you are able to display posts that do not have featured images. This is a good tool to use when you have a collection a user may find useful to see.
Example
Example Code:
[posts numberposts="5" style="masonry" type="post" excerpt="true" cat="Sample"]In the example video above, there is no image in the first box, because Sample Post 5 does not have an associated featured image.
The masonry style is called by including style="masonry" in the shortcode for posts. See the article on the [posts] shortcode for more information about the other attributes.
If all the pictures are the same aspect ratio and none of them fit any of the rules below*, you will always get the 180X180 boxes. The posts shortcode will pull in the featured image from a post. So if you want to use different size featured images for masonry but not show the masonry image at the top of your post, then use the masthead tag to hide the featured image and place the image for the top of the post above the masthead tag.
<!--masthead--> *(width / height > (560 / 180) - 0.25) {
style.width = 560;
style.height = 180;
}
else if (width / height > (370 / 180) - 0.25) {
style.width = 370;
style.height = 180;
}
else if (width / height < (180 / 370) + 0.25) {
style.width = 180;
style.height = 370;
}
Remember, if images don't fit any of these conditions, it defaults to 180X180 so please check the size of your images.