WordPress: Display all images attached to a post/page

NOTE: Nov 20, 2013 – This post has been updated to include more examples from the comment thread. View the updated post here »

You’ve probably struggled with the default output of the WordPress gallery shortcode. It’s OK. We all have. By default, WordPress wraps the entire gallery in a div, and then further wraps the images in dl & dt tags.

Advertisement

There are a few, excellent WordPress image gallery plugins that address gallery shortcode styling (File Gallery Plugin), as well as the invalid XHTML code (Cleaner Gallery Plugin). These plugins work great for many things, but they also add a lot more functionality.

If all you want to display is a simple list of all the image attachments that are attached to a particular page/post, and you just want the img tags, there’s a much easier way to do it.

Display WordPress attachments (images) with img tags only

Place the following code inside the loop on a single page or post template.

<?php
	$images =& get_children( array (
		'post_parent' => $post->ID,
		'post_type' => 'attachment',
		'post_mime_type' => 'image'
	));

	if ( empty($images) ) {
		// no attachments here
	} else {
		foreach ( $images as $attachment_id => $attachment ) {
			echo wp_get_attachment_image( $attachment_id, 'thumbnail' );
		}
	}
?>

get_children explained

You can adjust the variables in the get_children array.

If you want to get images from a specific page/post, you’d set post_parent to the ID of that page/post. Using $post->ID returns the images from whatever page/post you are on.

If you just used 'post_type' => 'attachment', then PDFs, audio files, and any other type of attachment would also be listed. Using 'post_mime_type' => 'image' will only return image attachments. You could similarly get video attachments by using 'post_mime_type' => 'video'.

There are a few other parameters you could pass to the get_children array, to further customize the display of attachments. View all the get_children options in the WordPress codex »

Image Size

The size of the image is easily controlled in the last line of code:

echo wp_get_attachment_image( $attachment_id, 'thumbnail' );

Just change thumbnail to medium, large, or any custom image size you have created in your functions.php file. (how to create custom image sizes)

Display Images As Links to Fullsize Image

As mentioned by Jason in the comments, you might want to display all images attached to your WordPress page/post as a list of links, with the link opening up the fullsize image. In the echo statement above, just replace wp_get_attachment_image with wp_get_attachment_link. (WordPress codex for wp_get_attachment_link)

Dave Warfel

Bio coming soon...

45 thoughts on “WordPress: Display all images attached to a post/page

  1. Great stuff! Worked like a charm. 🙂

    Quick question: How can I turn those images into links?

    Thanks for your help!

  2. Finally I found a working way to do this! Thank you!

    Is there a way to exclude the featured image from this?

  3. Gabriela,

    To exclude the featured image, just add the exclude parameter to your get_children array.

    Using the above example, your code would look like this:

    $images =& get_children( array (
    ‘post_parent’ => $post->ID,
    ‘post_type’ => ‘attachment’,
    ‘post_mime_type’ => ‘image’,
    ‘exclude’ => get_post_thumbnail_id()
    ));

    Codex Reference

  4. Hello Dave,
    I’m facing a problem like same where I want to show images with navigation on single post page.
    Here is a example, this guy having this functionality for both images and text posts. Please if you can help me.

    @http://www.kicksonfire.com/2013/10/01/top-25-kicks-watch-october/

  5. @Aank,

    I’m not 100% sure what you’re asking, but if you’re looking for a way to display a backup or default image, for when a featured image is not chosen, try this:

    < ?php if (has_post_thumbnail()) {
    	echo get_the_post_thumbnail($post->ID, 'large', array('class' => 'thumbnail', 'title' => ''));
    } else { // Use a fallback ?>
    	<img class="thumbnail" src="https://placehold.it/750x500" alt="Image coming soon" />
    < ?php } ?>

    Then change http://placehold.it/750×500 with the URL to your fallback image. And you can change the class names to whatever you want. I just used “thumbnail” as an example.

  6. @ Dave,
    Thanks before for you replay dave,
    this code:

    $post->ID,
    ‘post_type’ => ‘attachment’,
    ‘post_mime_type’ => ‘image’
    ));

    if ( empty($images) ) {
    // no attachments here
    } else {
    foreach ( $images as $attachment_id => $attachment ) {
    echo wp_get_attachment_image( $attachment_id, ‘thumbnail’ );
    }
    }
    ?>

    Actually this code is work for me, but i want to setting custom image if nothing attachments or empty on the featured post. can you help me?

    Sorry my english is bad. Thanks

  7. Aank,

    Try replacing this line:

    // no attachments here

    with this:

    <img src="/path/to/your-custom-image.jpg" alt="" />

    And you would replace the image src with the URL to your custom image.

  8. This is work dave,.
    And I try like this
    ?><img src="/images/custom-image.jpg” alt=”” /><?php

    Thanks Dave,

  9. Thank you for sharing this, helped out alot. I have one question.

    How can I add a class to the link so that I can get my lightbox to work? The one I use just requires the class=”lightbox” to be added to the <a href but I cannot figure out where to add that so it shows up in the link.

    Thanks!

  10. @Chris,

    If you add the code below to your functions.php file, it will add a “lightbox” class to all images that are displayed using the “wp_get_attachment_link” function. This should work, but it could also cause unintended consequences in other areas. If your theme uses wp_get_attachment_link in other places, this will add the lightbox class to them as well.

    Let me know if there’s a specific set of pages/posts/categories/etc. that you want to add the class to images on that set, and I might be able to modify the code below to only apply it for those certain situations.

    function add_class_attachment_link($html){
        $postid = get_the_ID();
        $html = str_replace('<a ','<a class="lightbox" ',$html);
        return $html;
    }
    add_filter('wp_get_attachment_link','add_class_attachment_link',10,1);
  11. hey, how about when we want to limit it to a number of images? ie., if you want only 25 images to display. is it possible?

  12. @Nadine,

    Modify your call to get_children to look like this (below):

    $images =& get_children( array (
    	'post_parent' => $post->ID,
    	'post_type' => 'attachment',
    	'post_mime_type' => 'image',
    	'posts_per_page' => 25
    ));
  13. Great post. I just need to now exclude an image that I am using for a custom field thumbnail, as it is in the same folder as the rest of the images. I have tried numerous ways but to no avail.

    I hope this is possible.

  14. @Nathan,

    I’m not sure how you’re implementing custom field thumbnails, but if you want to exclude a particular image, you can do so using the “post__not_in” parameter. Find the ID of the image you want to exclude, and then modify the get_children array to look something like this (assuming the ID of the image you want to exclude is 27):

    $images =& get_children( array (
    	'post_parent' => $post->ID,
    	'post_type' => 'attachment',
    	'post_mime_type' => 'image',
    	'post__not_in' => 27
    ));

    Or to exclude multiple images, that last line would look like this:

    'post__not_in' => array( 27, 28, 29, 30 )

  15. Great post. This is a much better option than the gallery shortcode in cases where flexibility is key.

    Is it possible to only show images which are enabled in the “Product Gallery” meta-box on the left-hand side of the post editor screen. At the moment, it works fine until I delete some images from the “Product Gallery” meta-box but the images still get displayed on the site after updating changes.

    Any help would be most appreciated.

  16. @Craig,

    Is the “Product Gallery” meta box added by a plugin you’re using? It’s not a default WordPress feature.

    My guess is, removing them from the “Product Gallery” meta box does not technically unattach them from the page. WordPress’ default functionality of attaching/unattaching images to a page is not related to the “Product Gallery” meta box that you’re using.

    You need to officially unattach the images from the page/post to get them to stop appearing.

    A plugin like File Gallery will add the ability for you to easily attach/unattach images on a post.

  17. Hi Dave.

    I am using Woocommerce. I thought this was a feature native to all wp posts that had been customized for products but it looks like its somethingdifferent altogether by the plugin. I’ll check their docs.

    Thanks for the quick response.

  18. It’s definitely specific to WooCommerce.

    If you decide to install the File Gallery plugin, here’s a screenshot of how to detach an image from a post or product. And also good to know, all the images that show up in the File Gallery meta box, these are all images that are attached to that post or product.

  19. great post, we do the same thing in our gallery plugin bepro listings. This is the only way to get the various image sizes for thumbnail browsing and pop up details. Unfortunate its not as easy as get_post_gallery_images($post_id).

  20. Hi Dave

    great post, how do i retrieve images from a specific folder or a Category?

    Thanks

  21. Hi Dave,

    This is exactly what i was looking for as a gallery widget. I’m using the wp_get_attachment_link which links each image to itself. How do i make the link go to the parent page – which is the gallery.

    Any help would be appreciated thanks!

  22. Molly,

    I’m not sure what you are trying to do. Do you have a URL you could show me with a live example?

    Also, have you tried using the $permalink parameter for wp_get_attachment_link (info here)? That may or may not do what you’re asking. But please send over a URL and I’ll if I can be of some help.

  23. “Display all images attached to a post/page”

    Thanks but where is the answer to that title? It is not getting ALL images, is it?

  24. This code of awesomeness helped me a lot.. If I use it for ‘post_mime_type’ => ‘video’, can you please tell me is this snippet looking for the shortcode [video] or the rendered html .

    What I am trying to do is getting the video(s) from the post and show it on the post grid on homepage by doing do_shortcode on index.php.

    I can give a hardcoded height and width on index.php by

    where $videoId came from your snippet.

    But how to make these height and width dynamic? How can I take the height and width parameter from the [video] shortcode using your code?

  25. I think the previous php comment got rendered.. here is what I am doing on index.php
    do_shortcode(‘[video height="300" width="100%" id="'.$videoId.'"]‘);

  26. Hi dave, i did the link to open fulls size image from thumbnails
    but now show me the thumbs without space between them
    any ideas?

  27. Great post! Thank you!

    How can I open the Link to Fullsize Image in a new window?
    Or, how to put a link back from fullsize image?

    my code is this:

    $post->ID,
    ‘post_type’ => ‘attachment’,
    ‘post_mime_type’ => ‘image’
    ));

    if ( empty($images) ) {
    // no attachments here
    } else {
    foreach ( $images as $attachment_id => $attachment ) {
    echo wp_get_attachment_link( $attachment_id, ” , false, false, ‘View Full Size’ );
    }
    }
    ?>

    Thank you for your help 🙂

  28. Lindorblu,

    Try replacing your last line with something like this instead:

    echo wp_get_attachment_link( $attachment_id, 'full' );

    full is the proper string to use for the full-size image. And it should be the 2nd parameter. Parameters 3, 4 & 5 can remain blank since they will all remain the default (false).

  29. hi,this is ram,i just want the attached gallery images in mobile app in json api,could you please tell me how can i get the attachment images in API .Thank you

  30. Hello Dave,

    Can you help me i have try your code but than i have all the media images from wordpress in my plugin front-end-pm. I need 1 image from the user in the front-end-pm by the user messagge.

    This ois the orginal code with Avatar but i will not the avatar but the image from the user. I have Classipress. so i need the Classipress attachment from the post page or this code cp_get_image and than the specifiec user by the message that is login.

Leave a Reply

Your email address will not be published. Required fields are marked *