Question

我使用Timber进行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>

我创建了一个名为＆＃34; projets＆＃34;的自定义帖子类型。我想为每个＆＃34; projets＆＃34;创建一个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 %}

在每篇文章中，我为图像创建了一个转发器字段（称为＆＃34; project_imgs＆＃34;）。每张图片都必须创建一张幻灯片但我没有设法创建第二个循环。我可以帮助创建我的第二个循环吗？

{% 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 %}

Answer 2

只需添加Junaid的答案，该代码的结构可能会像这样更好：

{% set projectImgs = slides.get_field('project_imgs') %}

{% for slide in projectImgs %}
  <div class="slide slide{{ loop.index }}">
     <div class="image-container" data-type="home" data-currentslide="{{ loop.index }}" data-maxslides="{{ projectImgs | length }}" data-title="Title" data-project="+49(0)1520 8819162 Berlin&amp;Hamburg (GERMANY)">
        <img src="{{ slide.project_img_desktop }}" 
             srcset="{{ slide.project_img_mobile }} 360w,
                     {{ slide.project_img_desktop }} 2000w" />
    </div> 
  </div>
{% endfor %}

很抱歉，如果仍然无法清除任何内容-只是以为我会把srcset放在那里以用于您的不同图像大小。另外，使用循环索引而不是计数将是有意义的，因为无论如何它都会增加。

Wordpress / Timber / ACF为每张图片创建幻灯片

2 个答案: