0

我将 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>

我创建了一个名为“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”）。每个图像必须创建一个幻灯片。但我没有设法创建第二个循环。我可以帮忙创建我的第二个循环吗？

我的 ACF 结构

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

4

2 回答 2

1

只是为了添加到 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 放在那里以用于您不同的图像尺寸。同样使用循环索引而不是计数也是有意义的，因为无论如何都会增加。

于 2019-05-10T10:54:32.703 回答
0

这应该有效（未经测试）

{% 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 %}
于 2017-06-22T22:19:01.370 回答