using wp_get_attachment_image_src in foreach loop

Question

I have 10 images added to a post via Advanced Custom Fields, they're named from 1 to 10 e.g 'image_*', ACF is set to return the ID.

I'm trying to get the full size image URL of each image in the loop and use it as a href attribute to open a full size popup of the image, however I don't understand how wp_get_attachment_image_src works.

Since I am unable to use Advanced Custom Field's Repeater, this is the loop i'm using to get an array of the images with a custom image size of scaled, it works fine to generate the responsive image markup that I need:

// args    

$sizeHuge = 'scaled'; // scaled image  
$images = array(); // img array

for($x = 1; $x <= 10; $x++) { 
        $img = get_field('image_' . $x);
   if($img) {
        $images[] = $img; 
   } else {
        break;
   }
 }


<?php foreach($images as $image) { ?>

    <a href="" class="open-viewer">

        <?php echo wp_get_attachment_image( $image, $sizeHuge ); ?>

    </a>

<?php } ?>

I need to set the href attribute of the parent a element with the URL of the image. This is what I have tried with wp_get_attachment_image_src, it doesn't work, it sets every href with image_10's URL.

// args

$sizeFull = 'full'; // full size image
$sizeHuge = 'scaled'; // scaled image  
$images = array(); // img array

for($x = 1; $x <= 10; $x++) { 
        $img = get_field('image_' . $x);
        $image_array = wp_get_attachment_image_src($img, $sizeFull);
        $link = $image_array[0];                
   if($img) {
        $images[] = $img; 
   } else {
        break;
   }
 }


<?php foreach($images as $image) { ?>

    <a href="<?php echo $link; ?>" class="open-viewer">

        <?php echo wp_get_attachment_image( $image, $sizeHuge ); ?>

    </a>

<?php } ?>

My question is: How can I set the href of a.open-viewer with the correct URL?, and secondly, why does my code fail? (debug is switched on but no errors appear).

I realise I've horribly misunderstood something here, I'm a PHP novice so any advice about my approach would be appreciated.

Answer 1

First in your first loop why do you break it? if there is no image in image_5 if someone just skip this and continue to image_6?

Second the ACF image field can return you an array with all the sizes. you need to set the field to return you Image Array

And then you can do something like this.

for($x = 1; $x <= 10; $x++) { 
    $img = get_field('image_' . $x);
    if($img) {
        ?>
            <a href="<?php echo $img['url']; ?>" class="open-viewer">
                <img src="<?php echo $img['sizes']['scaled']; ?>" alt="<?php echo $img['alt']; ?>">
            </a>
        <?php
    }
}

In case you can't return Image Array and you return the Image ID

for($x = 1; $x <= 10; $x++) { 
    $img_id = get_field('image_' . $x);
    if($img_id) {
        $fullsize_image = wp_get_attachment_image_src($img_id, 'full');
        ?>
            <a href="<?php echo $fullsize_image[0]; ?>" class="open-viewer">
                <?php echo wp_get_attachment_image($img_id, 'scaled'); ?>
            </a>
        <?php
    }
}