using wp_get_attachment_image_src in foreach loop - wordpress

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

In your first block, in your loop, you're setting the value of $link to the value of $image_array[0], but you're overwriting it each time. You want array_push here.
$images = array();
for($x = 1; $x <= 10; $x++) {
$img = get_field('image_' . $x);
$image_array = wp_get_attachment_image_src($img, $sizeFull);
if($image_array && $image_array[0]) {
array_push($images,
array(
src => $image_array[0],
id => $img
)
);
} else {
break;
}
}
Now, when you loop over it the second array, you can just do:
<?php foreach($images as $image) { ?>
<a href="<?php echo $image['src']; ?>" class="open-viewer">
<?php echo wp_get_attachment_image( $image['id'], $sizeHuge ); ?>
</a>
<?php } ?>
And the value of href should be the image URL.

Answer 2

Following is the updated/corrected code which will work for you:
<?php
// 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);
if($img) {
$images[] = $img;
} else {
break;
}
}
<?php foreach($images as $image) {
$image_array = wp_get_attachment_image_src($image, $sizeFull);
$link = $image_array[0];
?>
<a href="<?php echo $link; ?>" class="open-viewer">
<?php echo wp_get_attachment_image( $image, $sizeHuge ); ?>
// or Rather than calling above function, why don't you write <img> tag as you already have image url ? Like:
<img src="<?php echo $link; ?>" class="">
</a>
<?php } ?>