2017-10-21 237 views
0

我目前將ACF字段添加到我的貓頭鷹傳送帶中。獲取圖像以顯示作品。我遇到了一個問題,我的代碼將所有來自中繼器的結果分散到每張幻燈片中,而不是一個接一個。以下是代碼(所有內容都正確鏈接到Wordpress ACF字段),並附上了滑塊外觀的圖像。ACF Gallery中的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;?> 

The error where all results from the repeater (Company name, title and URL) all get spit out into each slide, rather than one by one.

+1

貓頭鷹的正確結構是什麼?你將所有內容都放入一個幻燈片中的同一個容器中......是它期望的嗎? – FluffyKitten

+0

@FluffyKitten這是我認爲我會出錯的地方。我如何構造代碼,以便中繼器能夠爲每個幻燈片吐出一個結果? –

+1

這取決於貓頭鷹!你有沒有檢查貓頭鷹的文件和例子,看看它的期望?另外,我不瞭解ACF字段的結構 - 您的中繼器字段與滑塊圖像有什麼關係?目前沒有明確的聯繫......或者它們是完全獨立的嗎? – FluffyKitten

回答

1

有自己的圖像和字幕之間沒有直接的關係,因爲它們是在不同的ACF領域,所以你已經對自己更難以讓您的循環權利建立該關聯正確。

我的建議是直接將圖像字段添加到您的中繼器字段中,而不是使用單獨的圖庫字段。

1:編輯具有中繼器的現場組,並添加另一個子給它的形象,具有以下設置:

  • 字段類型:內容:圖片

  • 返回值:圖像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; ?> 

請注意,這只是我的頭頂部&是未經測試,但它應該給你最新的想法需要。