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

  • Sensei888

    This grabs all attachments from all posts not the specific post or page that I’m on? Doesn’t it?

    • martyspellerberg

      The post/page you’re on (via the passing of $post->id).

  • Voxs

    i´d a try, but wasn´t successfull, caus don´t know where to put which part of code … is it possible to get a more practically advice, a howto or tut e.g.? thanks in advance

  • Codex73

    Thank you. This worked perfectly 😉

  • Hi, this is really great, thank you! One question I have is I have more than one featured image associated with each post on the site I’m building and so I need to add two exclusions of images from the slideshow – the standard ‘post-thumbnail’ you have already excluded and the additional featured image. Can you help with how I would do this? Many thanks!

    • martyspellerberg

      How are you acheiving multiple featured images; a custom field, perhaps via a plugin?

  • Frederik vdbe

    Thank you so much for this!
    I modified the code to make my own custom html output to generate a gallery using a lightbox plugin:

    After:
    $big_array = image_downsize( $image->ID, 'large' );
    $img_url = $big_array[0];

    Add:
    $med_array = image_downsize( $image->ID, 'medium' );
    $med_img_url = $med_array[0];

    Then in the html part of the function:
    Change:

    <img src="" alt="" title="" />

    into:
    <a href="" rel="product-photos"><img src="" alt="" title="" />

    Thanks again and hopefully this will help to..

    • martyspellerberg

      Thank you!

  • Hammersmith

    Thank you for the function. I have the images pulling in from a gallery, and invariably, one of the images is always coming in twice. Have you run across this? If so, do you have any suggestions?

  • Sandeep

    Is it possible to make it visible on the widget panel or sidebar

  • Cory

    Can you tell me why it’s only loading the first image from the gallery?

  • Thanx marty for sharing this code 🙂 it works.

    But I have a problem. I´m usign that code in the index.php loop, and only display the gallery for the last post the rest don´t load the gallery, any idea why ?

    Happy holidays BTW 🙂

This website is hosted by Media Temple. Thanks, guys!