Showing Images from the WordPress Attachments Gallery

I’ve been upgrading artist Flavio Trevisan’s site to take advantage of some of the features that have been added to WordPress since we first did the implementation. This gave me the opportunity to revisit a PHP function I use to pull images from the WordPress attachment gallery for use in jQuery slideshows.

The jQuery (which I won’t go into here) looks for a div classed “gallery” containing a series of divs classed “slide”.

Inside our theme’s functions.php file, we’ll create our function:

<?php
 
function marty_get_images($post_id) {
	global $post;
}
 
?>

Which we will then be able to call within the loop like so:

<?php marty_get_images("$post->ID"); ?>

Loop through the images

Next, we’re going to load the images associated with this Post ID to a variable:

$images = get_children( array('post_parent' => $post_id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );

Now, so long as we do in-fact have images, we’re going print out the “gallery” div that’s going to wrap our slides:

if ($images) :
	echo '<div class="gallery">';
	echo '</div><!-- End gallery -->';
endif;

Between the beginning and end of that div we’ll loop through each image in the standard way:

foreach ($images as $attachment_id => $image) :
endforeach;

Exclude Post Thumbnail

I’m going to take a step back here and mention a feature you may or not want to include. On Flavio’s site we’re using specially-created images for the Post Thumbnails which are associated with the post but we don’t want to include in our gallery.

Up at the top of the function, we get the ID of the assigned thumbnail:

$thumbnail_ID = get_post_thumbnail_id();

And then, inside our foreach:

if ( $image->ID != $thumbnail_ID ) : 
endif;

Output HTML

Inside there, assign each of the fields we want to output to a variable. If the alt field is empty we’ll use title (which is required) in it’s place.

$img_title = $image->post_title;   // title.
$img_caption = $image->post_excerpt; // caption.
$img_description = $image->post_content; // description.
 
$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); //alt
if ($img_alt == '') : $img_alt = $img_title; endif;
 
$src_array = image_downsize( $image->ID, 'large' );
$img_url = $src_array[0];

And now it’s time to output the HTML of the slides:

<div class="slide">
	<div  class="description">
		<p class="title"><?php echo $img_title; ?></p>
		<?php if ($img_caption) : echo wpautop($img_caption, 'caption'); endif; ?>
		<?php if ($img_description) : echo wpautop($img_description); endif; ?>
	</div>
	<div class="image">
		<p><img src="<?php echo $img_url; ?>" alt="<?php echo $img_alt; ?>" title="<?php echo $img_title; ?>" /></p>
	</div>
</div>

And that’s it!

The Complete Function

Here’s the whole thing:

<?php
 
function marty_get_images($post_id) {
	global $post;
 
	$thumbnail_ID = get_post_thumbnail_id();
 
	$images = get_children( array('post_parent' => $post_id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
 
	if ($images) :
		echo '<div class="gallery">';
 
		foreach ($images as $attachment_id => $image) :
 
		if ( $image->ID != $thumbnail_ID ) :
 
			$img_title = $image->post_title;   // title.
			$img_caption = $image->post_excerpt; // caption.
			$img_description = $image->post_content; // description.
 
			$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); //alt
			if ($img_alt == '') : $img_alt = $img_title; endif;
 
			$big_array = image_downsize( $image->ID, 'large' );
	 		$img_url = $big_array[0];
 
			?>
 
			<div class="slide">
				<div  class="description">
					<p class="title"><strong><?php echo $img_title; ?></strong></p>
					<?php if ($img_caption) : echo wpautop($img_caption, 'caption'); endif; ?>
					<?php if ($img_description) : echo wpautop($img_description); endif; ?>
				</div>
				<div class="image">
					<p><img src="<?php echo $img_url; ?>" alt="<?php echo $img_alt; ?>" title="<?php echo $img_title; ?>" /></p>
				</div>
			</div>
 
		<?php endif; ?>
		<?php endforeach; ?>
		</div><!-- End gallery -->
	<?php endif;
 
}
 
?>

Posted November 2011

Marty Spellerberg