Create a Link to Larger Image from within list of smaller images

Question

I have this in my functions.php:

 function display_images_in_list($size = thumbnail) {

 if($images = get_posts(array(
    'post_parent'    => get_the_ID(),
    'post_type'      => 'attachment',
    'numberposts'    => -1, // show all
    'post_status'    => null,
    'post_mime_type' => 'image',
            'orderby'        => 'menu_order',
            'order'           => 'ASC',
 ))) {
    foreach($images as $image) {
        $attimg   = wp_get_attachment_image($image->ID,$size);

 echo $attimg;

        }
    }
}

Then I have this in my template page:

<?php display_images_in_list('ca_thumb-large'); ?>

This code displays a list of images on the front-end post. I need to add a link to wrap each image. The link should point to a larger version of the same image. I have a larger image size with the name of recipe-full that I want to show when clicked.

I think I just need to modify the function, but I'm having trouble here.

Answer 1

Just use wp_get_attachment_image_src 2 times, to retrieve the 2 sizes:

function display_images_in_list($size = 'thumbnail', $fullsize = 'full') {

    //.. previous function code is good ...

    foreach($images as $image) {
       $th = wp_get_attachment_image_src($image->ID, $size);
       $full = wp_get_attachment_image_src($image->ID, $fullsize );
       printf(
         '<a href="%s"><img src="%s" width="%d" height="%d" alt="%s" /></a>',
         $full[0], $th[0], $th[1], $th[2], esc_attr( $image->post_title )
       );
    }
  }
}

the use the function like this:

<?php display_images_in_list('ca_thumb-large', 'recipe-full'); ?>