I'm displaying a gallery image but I also want display the caption for image. I can get the info that we insert when us upload a image in WordPress Dashboard like "Title/Caption/ALT/Description". I want get anyone and display.

<?php    
    $gallery = get_post_gallery_images( $post );
    foreach( $gallery as $image_url ) :    
?>                                

    <div class="item" style="background-image: url('<?php echo $image_url ?>'); background-size: cover">
        <div class="caption">                
            <!-- Here I want display the Title/Caption/ALT/Description of image -->
            <h2><?php echo $image_url->"DESCRIPTION/TITLE/ALT"; ?> </h2>
        </div>                                        
    </div>

Reading at the docs of get_post_gallery_images I didn't find a solution for my issue.
I also found this answer but I don't know if it works and I've erros to implement in my code.

Anyway, how can I solve this?

up vote 2 down vote accepted

You need to get the metadata of each image, add this to your functions.php file:

function get_post_gallery_images_with_info($postvar = NULL) {
    if(!isset($postvar)){
        global $post;
        $postvar = $post;//if the param wasnt sent
    }


    $post_content = $postvar->post_content;
    preg_match('/\[gallery.*ids=.(.*).\]/', $post_content, $ids);
    $images_id = explode(",", $ids[1]); //we get the list of IDs of the gallery as an Array


    $image_gallery_with_info = array();
    //we get the info for each ID
    foreach ($images_id as $image_id) {
        $attachment = get_post($image_id);
        array_push($image_gallery_with_info, array(
            'alt' => get_post_meta($attachment->ID, '_wp_attachment_image_alt', true),
            'caption' => $attachment->post_excerpt,
            'description' => $attachment->post_content,
            'href' => get_permalink($attachment->ID),
            'src' => $attachment->guid,
            'title' => $attachment->post_title
                )
        );
    }
    return $image_gallery_with_info;
}

use it in your logic like this:

<?php    
    $gallery = get_post_gallery_images_with_info($post); //you can use it without params too
    foreach( $gallery as $image_obj ) :    
?>                                

    <div class="item" style="background-image: url('<?php echo $image_obj['src'] ?>'); background-size: cover">
        <div class="caption">                
            <!-- Here I want display the Title/Caption/ALT/Description of image -->
            <h2><?php echo $image_obj['title']." ". $image_obj['caption']." ".$image_obj['description']; ?> </h2>
        </div>                                        
    </div>
<?php    
endforeach;
?>

it will output like this:

enter image description here

each image returned by the function is an array like this:

Array
        (
            [alt] => Alt Coffe
            [caption] => Caption coffe
            [description] => Description coffe
            [href] => http://yoursite/2017/02/14/hello-world/coffee/
            [src] => http://yoursite/wp-content/uploads/sites/4/2017/02/coffee.jpg
            [title] => coffee
        )

notice href and src are different, one is the permalink and the other the direct URL.

  • Amazing! Very simple and clean. Thanks a lot for you help! – Zkk Feb 16 '17 at 17:45
  • I am new to wordpress and php - where did you insert this part of the code – Yebach Mar 15 at 8:14
  • @Yebach this works with a post object that has a image gallery, the function goes to functions.php and the logic into any singular template where you can provide a post object to the function – David Lee Mar 20 at 2:48

The caption for an image is actually meta_data attached to the image and the get_post_gallery_images only returns a url, so in the array you won't have any other information.

You could try something like:

<?php    
    $gallery = get_post_gallery_images( $post );
    foreach( $gallery as $image_url ) :  

    //get the id of the image post.
    $image_id = url_to_postid( $image_url ) 
    //get the image "post" information
    $image = get_post($image_id);
    //get the image title
    $image_title = $image->post_title;
    //get the image caption
    $image_caption = $image->post_excerpt;

?>                                

    <div class="item" style="background-image: url('<?php echo $image_url ?>'); background-size: cover">
        <div class="caption">                
            <!-- Here I want display the Title/Caption/ALT/Description of image -->
            <h2><?php echo $image_caption; ?> </h2>
        </div>                                        
    </div>

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.