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'simage_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 probably horribly misunderstood something here, I'm a PHP novice so any advice about my approach would be appreciated.
