0

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.

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
    }
}
  • Thanks, sadly I'm not able to change the ACF return value to Image Array, I must use the image ID. – David Alsbright Nov 16 '17 at 20:13
  • I edited the answer and gave you the other option for image id – Shibi Nov 16 '17 at 20:23
  • Thank you, this works! Can you explain a little more about the first part of your answer please? '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?' I'm a PHP novice, thanks for your help – David Alsbright Nov 16 '17 at 20:28
  • 1
    I meant in this what if someone will fill fields image_1 and image_3 but didn't fill the field image_2 in that case in your code you break the loop and then image_3 won't show... so better to continue the loop. its good also if you want to delete some image in the middle and leave it empty. – Shibi Nov 16 '17 at 20:33
  • I see what you mean now, that's exactly what I don't want to happen! I just tested this scenario with your code and it works perfectly. Thank you for your help with the problem and your ability to spot a potential future problem! – David Alsbright Nov 16 '17 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.