WordPress Masonry Gallery Shortcode

sjf_deh_gallery.php

<?php

/**
 * Shortcode for a Masonry-powered WordPress image-gallery
 *
 * @param  array $atts An array of WP shortcode args for post_id
 * @return string A Masonry-powered WordPress image-gallery
 */
function sjf_deh_gallery( $atts ){	
	extract( shortcode_atts( array(
		'post_id' => '',
	), $atts ) );

	// Try to get a post with the given ID
	if( ! $post = get_post( $post_id ) ) {
		
		// If there is no post with that ID, try to get the current post.
		if( ! $post = get_post() ) {

			// If there is no current post, such as on 404 pages, bail.
			return false;
		}  
	}

	// If there is no post ID, we should bail.
	$post_id = absint( $post->ID );
	if( empty( $post_id ) ) { return false; }

	// Start the output since soon we'll be appending through a loop and we need something to append to.
	$out = '';
	
	// Args for a get_posts call to get images attached to this post.
	$args = array(

		// we're getting the posts that are attached to the current post
		'post_parent' => $post->ID,
		
		// our photos are posts of the attachment post type
		'post_type' => 'attachment',
		
		// so as to allow attachments
		'post_status' => 'any',

		// because random is cool
		'orderby' => 'rand',
		
		// grab all photos
		'posts_per_page' => -1,

		// only grab jpegs
		'post_mime_type' => 'image/jpeg',
	
	);
	
	// an array of attachment posts
	$photos = get_posts( $args );
	if( !is_array( $photos ) ) { return false; }
	
	// gets all registered image sizes
	$sizes = get_intermediate_image_sizes();
	
	// which sizes do we want to use in our gallery?  The sizes with 'masonry' in the name.
	$masonry_sizes = array();
	
	// for each image size...
	foreach( $sizes as $size ) {
		
		// if there's anything 'full' about this image name, just skip it -- we don't want huge photos in our random pool
		if( stristr( $size, 'full' ) ) { continue; }

		// if the size has masonry in the name, add it to the array of allowed sizes
		if( stristr( $size, 'masonry' ) ) {
			$masonry_sizes[]= $size;
		}
	} // end for each image size


	// how many different sizes do we have at our finger tips?
	$sizes_count = count( $masonry_sizes );

	// we'll be grabbing sizes by numeric index, so we need to decrement the size (arrays start with 0)
	$sizes_count--;
	
	// for each photo...
	foreach( $photos as $p ) {

		// the ID for this photo
		$p_id = absint( $p->ID );

		// the title for this photo, which we'll use as the alt attr
		$p_title = esc_attr( $p->post_title );

		// the link to view this attachment
		$p_link = get_permalink( $p_id );

		// at some point, we'll want to know if this photo is panoramic
		$maybe_pano = '';

		// at some point, we'll want to know if this photo is a portrait
		$maybe_portrait = '';
		
		// if this photo is panoramic, we want to grab it in the full-column width 
		if( sjf_deh_is_pano( $p_id ) ) {

			// this is related to the $content_width global var, with some custom mods
			$size='sjf_deh_content_width';

			// it's a pano.  we'll append this as a CSS class for styling
			$maybe_pano = 'is_pano';
		
		// if this photo is a portrait, we wouldn't want it to be too wide, otherwise it would be super tall.
		} elseif( sjf_deh_is_portrait( $p_id ) ) {
			
			// just grab it in quarter width so it's not too tall
			$size = 'sjf_deh_quarter_content_width';
			
			// we'll use this as a CSS class for styling
			$maybe_portrait = 'is_portrait';
		
		// it's not a pano or a portrait, so we can use any random size!
		} else {

			// grab a random number, which we'll use to select an image size for this photo
			$rand = rand( 0, $sizes_count );
		
			// grab an image size based on this random number
			$size = $masonry_sizes[$rand];
		}
		
		// grabs an array of info about this image
		$src_array = wp_get_attachment_image_src( $p_id, $size );
		
		// the src for the image
		$src = esc_url( $src_array[0] );
		
		// the width of the image file
		$width = absint( $src_array[1] );

		// the height of the image file
		$height = absint( $src_array[2] );

		// we'll shrink the image for retina-friendly display
		$display_width = $width / 2;
		$display_height = $height / 2;
		
		// add this image, wrapped in a link, to the output
		$out.="
			<a target='_blank' href='$p_link'>
				<img class='$size $maybe_pano $maybe_portrait'  height='$display_height'  width='$display_width' src='$src' alt='$p_title'>
			</a>
		";
	}
	
	// wrap the images in a container
	$out = "<div class='sjf_deh_gallery'>$out</div>";
		
	// grab the content width and divide it by 4
	global $content_width;
	$column_width = $content_width / 4;

	// output a chunk of js to masonry-ify our gallery.  runs on window load so as to wait for images to load in order to calculate height correctly
	$out.='
		<!-- added by sjf_deh_gallery -->
		<script>
			jQuery( window ).load(function(){
				var $container = jQuery(".sjf_deh_gallery");
				$container.masonry({
 					itemSelector: "a",
 					columnWidth: '.$column_width.'
				});
			});
		</script>
	';
	
	// enqueue the wordpress copy of masonry
	wp_enqueue_script( 'masonry'  );

	return $out;
}
add_shortcode('sjf_deh_gallery', 'sjf_deh_gallery');