ACF库中的ACF中继器渲染不正确

我目前正在将ACF字段添加到” 猫头鹰轮播” 中。在使图像显示的同时。我遇到了一个问题, 我的代码将所有来自中继器的结果分散到每张幻灯片中, 而不是一张一张地吐出来。下面是代码(所有内容均正确链接到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="http://www.srcmini.com/< ?php the_sub_field('homepage_slideshow_repeater_url'); ?> "> View Work< /a> < ?php endwhile; ?> < ?php endif; ?> < /div> < /div> < ?php endforeach; ?>

ACF库中的ACF中继器渲染不正确

文章图片
#1 【ACF库中的ACF中继器渲染不正确】图像和标题之间没有直接关系, 因为它们位于单独的ACF字段中, 因此, 使循环正确创建正确的关联变得非常困难。
我的建议是将图像字段直接添加到你的homepage_slideshow_repeater中继器字段中, 而不要使用单独的图库字段。
1:编辑具有中继器的字段组, 并使用以下设置为其添加图像的另一个子字段:
  • 字段类型:内容:图片
  • 返回值:图片网址
通过仅返回图像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="http://www.srcmini.com/< ?php the_sub_field('homepage_slideshow_repeater_url'); ?> "> View Work< /a> < /div> < /div> < ?php endwhile; ?> < /div> < ?php endif; ?>

请注意, 这只是我的脑袋, 并且未经测试, 但是它应该使你了解所需的内容。

    推荐阅读