WordPress; displaying all images from a post with their corresponding captions

From any specific Post, I am trying to display all images, with their corresponding captions and arrange them one after the other like:

-------------
|           |
|    Img1   |
|           |
-------------
  Caption 1    

-------------
|           |
|    Img2   |
|           |
-------------
  Caption 2        

-------------
|           |
|    Img3   |
|           |
-------------
  Caption 3        

THAT IS WHAT I WANT TO ACHIEVE.

Read More

The code:

<?php

$attachments = get_children( array(
'post_parent' => get_the_ID(), 
'order' => 'ASC', 
'post_mime_type' =>'image') );

$args = array(
'post_parent' => get_the_ID(),  
        'order' => 'ASC',
        'post_type' => 'attachment' ); 

$thumb_images = get_posts($args);


foreach ($attachments as $attachment_id => $attachment)  

foreach ($thumb_images as $thumb_image) 

{
{
  echo "<div class='image'>";
  echo wp_get_attachment_image( $attachment_id, 'full' );
  echo "</div>";
  echo "<div class='caption'>";  
  echo $thumb_image->post_excerpt;
  echo "</div>";
}
}

?>

If there are 3 images & their corresponding captions, this code displays 3 times each image, and each one with the 3 different captions. That is 9 images & 9 captions. At least the captions are in order, but images repeat.

-------------
|           |
|    Img1   |
|           |
-------------
 Caption 1    

-------------
|           |
|    Img1   |
|           |
-------------
 Caption 2        

-------------
|           |
|    Img1   |
|           |
-------------
 Caption 3


-------------
|           |
|    Img2   |
|           |
-------------
  Caption 1    

-------------
|           |
|    Img2   |
|           |
-------------
  Caption 2        

-------------
|           |
|    Img2   |
|           |
-------------
  Caption 3            


  ETC

IF THE CODE IS UPDATED TO:

   <?php

$attachments = get_children( array(
'post_parent' => get_the_ID(), 
'order' => 'ASC', 
'post_mime_type' =>'image') );

$args = array(
'post_parent' => get_the_ID(),  
        'order' => 'ASC',
        'post_type' => 'attachment' ); 

$thumb_images = get_posts($args);


foreach ($attachments as $attachment_id => $attachment)   {

foreach ($thumb_images as $thumb_image)     {}  


  echo "<div class='image'>";
  echo wp_get_attachment_image( $attachment_id, 'full' );
  echo "</div>";
  echo "<div class='caption'>";  
  echo $thumb_image->post_excerpt;
  echo "</div>";

}

?>

It displays the images without repetitions, but the caption belongs to the last image that was loaded and repeats the equivalent to the total amount of images associated with the post.

-------------
|           |
|    Img1   |
|           |
-------------
  Caption 3    

-------------
|           |
|    Img2   |
|           |
-------------
  Caption 3        

-------------
|           |
|    Img3   |
|           |
-------------
  Caption 3 

Any idea on how to write it correctly, so that you end with x times the number of images and x times the number of captions one after the other? Without repetitions.

Best regards.

Laura

Related posts

Leave a Reply

1 comment

  1. Assuming that $attachments is the same size as $thumb_images:

    $i = 0;
    foreach ($attachments as $attachment_id => $attachment) {
        echo "<div class='image'>";
        echo wp_get_attachment_image($attachment_id, 'full');
        echo "</div>";
        echo "<div class='caption'>";  
        echo $thumb_images[$i]->post_excerpt;
        echo "</div>";
        $i++;
    }
    

    To have a better understanding of what’s in $attachments and $thumb_images, use the following code snippet for debugging:

    echo "<pre>";
    echo var_dump($attachments);
    echo var_dump($thumb_images);
    echo "</pre>";
    

    You’ll find that $thumb_images is an array.

    Q: What is the logic of $i++?

    $i++ is the post-increment operator.

    $i++ is really shorthand for $i = $i + 1, so for each iteration of the loop, the value of $i increments. Initially, $i = 0. Once $i++ is called, $i = 1. If $i++ is called again on another iteration, $i = 2 and so on and so forth.

    Instead of using a foreach loop, you can also use a for loop to iterate over arrays. For examples of the for loop (and correspondingly examples that use the $i++ concept), see PHP’s documentation for for.