Wordpress /木材/ ACF爲每個圖像創建幻燈片

Question

我使用木材的Wordpress和ACF。

我想創建一個結構類似：

<div class="section" id="section1"> 
     <div class="slide slide0"> 
       <div class="image-container" data-type="home" data-currentslide="1" data-maxslides="3" data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)"> 
        <img src="img/myimage.jpg"> 
       </div> 
     </div> 
     <div class="slide slide1"> 
       <div class="image-container" data-type="project" data-currentslide="2" data-maxslides="3" data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)"> 
        <img src="img/myimage.jpg"> 
       </div> 
     </div> 
     <div class="slide slide2"> 
       <div class="image-container" data-type="project" data-currentslide="3" data-maxslides="3" data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)"> 
        <img src="img/myimage.jpg"> 
       </div> 
     </div> 
    </div> 
    <div class="section" id="section2"> 
     <div class="slide slide0"> 
       <div class="image-container" data-type="project" data-currentslide="1" data-maxslides="3" data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)"> 
        <img src="img/myimage.jpg"> 
       </div> 
     </div> 
     <div class="slide slide1"> 
       <div class="image-container" data-type="project" data-currentslide="2" data-maxslides="3" data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)"> 
        <img src="img/myimage.jpg"> 
       </div> 
     </div> 
     <div class="slide slide2"> 
       <div class="image-container" data-type="project" data-currentslide="3" data-maxslides="3" data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)"> 
        <img src="img/myimage.jpg"> 
       </div> 
     </div> 
    </div> 

我創建了一個自定義文章類型稱爲「projets」。我想爲每個「projets」帖子創建一個div。

$context = Timber::get_context(); 
$context['projets'] = Timber::get_posts(array('post_type' => 'projets', 'posts_per_page' => '-1')); 

這個循環做工精細

{% for projet in projets %} 
     <div class="section" id="section{{loop.index}}"> 

     </div> 
{% endfor %} 

在我創建了圖像的中繼場每一個職位（稱爲 「project_imgs」）。每張圖片必須創建一張幻燈片。但我沒有設法創建第二個循環。我可以幫助建立我的第二個循環嗎？

{% for slide in slides.get_field('project_imgs') %} 
      <div class="slide slide{{ loop.index0 }}"> 
       <div class="image-container" data-type="home" data-currentslide="1" data-maxslides="1" data-title="Title" data-project="+49(0)1520 8819162 Berlin&amp;Hamburg (GERMANY)"> 
        <img src="img/myimage.jpg"> 
       </div> 
      </div> 
{% endfor %} 

另一個問題是遞增data-currentslide="1" data-maxslides="1"

Answer 1

這應該工作（未測試）

{% set count = 1 %} 
{% for slide in slides.get_field('project_imgs') %} 
    <div class="slide slide{{ loop.index0 }}"> 
    <div class="image-container" data-type="home" data-currentslide="{{count}}" data-maxslides="{{count}}" data-title="Title" data-project="+49(0)1520 8819162 Berlin&amp;Hamburg (GERMANY)"> 
     <img src="img/myimage.jpg"> 
    </div> 
    </div> 
{% set count = count + 1 %} 
{% endfor %} 

只是一個想法，如果maxslides代表幻燈片的最大數目可用？如果是這樣，那就改用下面的代碼。

{% set count = 1 %} 
{% for slide in slides.get_field('project_imgs') %} 
    <div class="slide slide{{ loop.index0 }}"> 
    <div class="image-container" data-type="home" data-currentslide="{{count}}" data-maxslides="{{ slides.get_field('project_imgs')|length }}" data-title="Title" data-project="+49(0)1520 8819162 Berlin&amp;Hamburg (GERMANY)"> 
     <img src="img/myimage.jpg"> 
    </div> 
    </div> 
{% set count = count + 1 %} 
{% endfor %}