ACF Gallery 中的 ACF Repeater 渲染不正确

Question

我目前正在将 ACF 字段添加到我的 Owl 轮播中。在获取图像以显示作品时。我遇到了一个问题，我的代码将其转发器的所有结果吐出到每张幻灯片中，而不是一张一张地吐出。下面是代码 （所有内容都正确链接到 Wordpress ACF 字段） 并且我附上了滑块外观的图像。

关于如何解决这个问题有什么建议吗？

<div class="owl-carousel" id="owl-single-example">
<?php foreach ($homepage_slideshow_gallery as $homepage_slideshow_gallery):?>
    <div class="slide" style="background-image: url('<?php echo $homepage_slideshow_gallery['url']; ?>')" />
        <div class="container caption">

        <?php if( have_rows('homepage_slideshow_repeater') ): ?>
          <?php while( have_rows('homepage_slideshow_repeater') ): the_row(); ?>
            <p><?php the_sub_field('homepage_slideshow_repeater_company'); ?></p>
            <h1 class="textblock"><span><?php the_sub_field('homepage_slideshow_repeater_title'); ?></h1>
            <a class="btn" href="<?php the_sub_field('homepage_slideshow_repeater_url'); ?>">View Work</a>
          <?php endwhile; ?>
        <?php endif; ?>

        </div>
    </div>
<?php endforeach;?>

Answer 1

您的图片和说明文字之间没有直接关系，因为它们位于不同的 ACF 字段中，因此您自己更难让自己的循环正确创建关联。

我的建议是将图像字段直接添加到您的 homepage_slideshow_repeater 转发器字段而不是使用单独的画廊字段。

1：编辑你的有转发器的字段组，并为图像添加另一个子字段，设置如下：

字段类型：内容：图片
Return 值：图片URL

通过只返回图像 URL，我们可以直接将其用于背景图像 url。

2：接下来编辑您的主页，并将相应的滑块图像直接添加到您的中继器，旁边是标题、标题等

3：现在在你的代码中，你只需要循环一次，因为所有相关信息都在同一个转发器行中。你会使用这样的东西（使用图像的字段名称 "slide_image"）：

<?php if( have_rows('homepage_slideshow_repeater') ): ?>
   <div class="owl-carousel" id="owl-single-example">
    <?php while( have_rows('homepage_slideshow_repeater') ): the_row(); ?>

       /* get the image from the repeater - the content will be just the url so we can use it directly */
       <div class="slide" style="background-image: url('<?php the_sub_field('slide_image'); ?>')" />

           /* now add the caption etc for this image to the slide */
           <div class="container caption">
             <p><?php the_sub_field('homepage_slideshow_repeater_company'); ?></p>
             <h1 class="textblock"><span><?php the_sub_field('homepage_slideshow_repeater_title'); ?></h1>
             <a class="btn" href="<?php the_sub_field('homepage_slideshow_repeater_url'); ?>">View Work</a>    
          </div>
       </div>

    <?php endwhile; ?>
  </div>
<?php endif; ?>

请注意，这只是我的想法并且未经测试，但它应该让您了解需要什么。

ACF Gallery 中的 ACF Repeater 渲染不正确

ACF Repeater within an ACF Gallery renders incorrectly

html

php

wordpress

wordpress-theming

advanced-custom-fields