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.

did you added image in a repeater field or created 10 different field with different id ? — Balwant
– Balwant, Commented Nov 16, 2017 at 18:20
@Balwant No, I'm unable to use the Repeater extension so I created ten images with different ID's. — David Alsbright
– David Alsbright, Commented Nov 16, 2017 at 18:28

prettyfly · Accepted Answer · 2017-11-16 21:18:57Z

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.

edited Nov 16, 2017 at 21:18

answered Nov 16, 2017 at 18:29

prettyfly

3,1401 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

prettyfly Over a year ago

As an aside $sizeHuge and $sizeFull would be more readable (and more semantically correct) as constants. const SIZE_FULL = "full"; etc

David Alsbright Over a year ago

Thank you, this now creates the a tag perfectly, but the <img> markup is not being created at all, I suspect this is related to not using both wp_get_attachment_image and wp_get_attachment_image_src together? You've given me a great starting point here, thank you for your help

prettyfly Over a year ago

@DavidAlsbright - See updated answer, wp_get_attachment_image takes the image attachment ID as its first parameter, which you appear to be getting from get_field. Updated code should give you access to the ID from the original loop.

AddWeb Solution Pvt Ltd · Accepted Answer · 2017-11-17 07:35:37Z

0

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 } ?>

answered Nov 17, 2017 at 7:35

AddWeb Solution Pvt Ltd

21.8k5 gold badges30 silver badges61 bronze badges

1 Comment

prettyfly Over a year ago

If, for any reason, wp_get_attachment_image_src() doesn't find an attachment, it returns false. This code will fail when trying to access an array index of a boolean in that scenario.

Collectives™ on Stack Overflow

using wp_get_attachment_image_src in foreach loop

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related