在foreach循环中使用wp_get_attachment_image_src

时间:2017-11-16 17:40:38

标签: wordpress foreach advanced-custom-fields

我通过高级自定义字段将10张图片添加到帖子中,它们的名称从1到10,例如' image _ *',ACF设置为返回ID。

我试图获取循环中每个图片的完整尺寸图片网址并将其用作href属性来打开图片的完整尺寸弹出窗口,但我不知道了解wp_get_attachment_image_src的工作原理。

由于我无法使用高级自定义字段的中继器,这是我用来获取自定义图像大小为scaled的图像数组的循环,它工作正常生成我需要的响应式图像标记:

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

我需要使用图片的网址设置父href元素的a属性。这是我用wp_get_attachment_image_src尝试过的,它没有用,它用href的URL设置每个image_10

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

我的问题是:如何使用正确的网址设置href的{​​{1}}?其次,为什么我的代码会失败? (打开调试但没有出现错误。)

我意识到我在这里误解了一些东西,我是一个PHP新手,所以对我的方法有任何建议都会受到赞赏。

2 个答案:

答案 0 :(得分:1)

在第一个区块中,在循环中,您将$link的值设置为$image_array[0]的值,但每次都会覆盖它。你想在这里array_push

$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;
  }
}

现在,当你在第二个数组上循环时,你可以这样做:

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

href的值应为图片网址。

答案 1 :(得分:0)

以下是适用于您的更新/更正代码:

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