Develop

WordPress: Display All Post Attachment Images In A Slider

The Issue

There are a lot of scenarios I can think of where you may need to do something like this, but let’s say for this particular example you would like to make your client’s life easy by allowing them to upload images to a post, and then having those images automatically output into an image slider on their published page…no plugins, no shortcodes, just magic.

Note

This method assumes you are familiar with editing theme files and including the necessary scripts and markup to create sliders. I’m not going through all of the steps involved with this, just the method for grabbing all of the photos attached to a particular post.

The Solution

We can pull all of the post attachments with the following function (add this to your functions.php file):

function revconcept_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) :

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

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

             $img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); //alt
             if ($img_alt == '') : $img_alt = $image->post_title; endif;

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

             echo '<li>';
             echo '<img src="';
             echo $img_url;
             echo '" alt="';
             echo $img_alt;
             echo '" />';
             echo '</li><!--end slide-->';

     endif; endforeach; endif; }

Note that this function DOES NOT include featured images attached to the post. If you want the featured image in the slider as well, see the alternate code in the example below.

This function pulls the images, with their alt attributes if they exist…if they don’t it will insert the post title as the alt attribute. It’s also setup to give you a choice in the size of the images that will be pulled, in this example it’s pulling the “large” image size, but you can change this to another image size, or even a custom image size that you’ve previously setup, just change “large” on this line: $big_array = image_downsize( $image->ID, 'large' );
The function outputs the images wrapped in <li> tags. For this example I was using FlexSlider by WooThemes (but you can easily modify this to work with another image slider). The last step in making this work, is to add the following to your template file:

<div class="flexslider">
    <ul class="slides">
        <?php revconcept_get_images("$post->ID"); ?>
    </ul>
</div><!--end flexslider-->

Again, note that some of this HTML markup is related to FlexSlider. The most important thing to include here is the <?php revconcept_get_images("$post->ID"); ?> which calls your function.

(UPDATED) Include Featured Images

If you want to include the featured images attached to your page/post, use this code instead:

function revconcept_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) :

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

             $img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); //alt
             if ($img_alt == '') : $img_alt = $image->post_title; endif;

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

             echo '<li>';
             echo '<img src="';
             echo $img_url;
             echo '" alt="';
             echo $img_alt;
             echo '" />';
             echo '</li><!--end slide-->';

     endforeach; endif; }

Conclusion

That’s it! This is a really simple way to make creating sliders super easy with minimal steps for your clients (or yourself, I use this method in my portfolio on this site).

{ 134 Comments }

  1. Mario

    Nevermind about the Next/Prev buttons not showing up. For some reason, the slider didn’t like the ‘fonts’ folder I created for the fonts. I deleted it and the fonts and then just uploaded the entire folder that comes with the zip file. Once I did that the buttons appeared.

  2. Thanks for the response. I already registered a new size for the images and used that line to link to it. But what I meant was actual linking to a larger image once the smaller images are already loaded into the slider. That way if a site visitor wants to see a larger version of an image they can click on it and it will open up a larger size in a light box.

    So in order for me to get the lightbox effect to work, each image has to be linked via <a href to their larger sized images. Can your code be augmented to allow for that kind of linking?

    Also, for some reason the Next & Previous arrows aren't displaying. I have the font files in their correct place in the directory and even ensured that the full path to them is spelled out in the flexslider.css file. Any suggestions?

    • Chris Perryman

      Sorry, I misunderstood. You can do this:

      $full_array = image_downsize( $image->ID, 'full' );
      $full_url = $full_array[0];
      

      And then in your link:

      echo $full_url;

      I’m sure there may be a “better” way, but that should work. Can you send a link to your site so I can look at the arrow issue?

{ Respond }

Leave a response