Question

我正在使用带有twig的Symfony2 Framework来生成我的模板。

我正在尝试在旋转木马中显示不同的图像（插入Jquery），并在每个图像上放置图像缩放（其他插件jquery）。

我正在从yaml文件生成我的图像。

<ul class="bxslider">
    {% for datas, values in values['themes'] if datas == category %}
        {% for value, key in values %}
            <li>

                <img src="{{ asset(key.urllow) }}" class="photo-diapo" id="{{ value }}" data-zoom-image="{{ asset(key.url) }}"/>

                <div class="addthis_sharing_toolbox"></div>

                <h3 class="photo-titre">{{ key.titre }}</h3>
                <h4 class="photo-date">{{ key.date }}</h4>
                <p class="photo-description">{{ key.description }}</p>

            </li>
        {% endfor %}
    {% endfor %}
</ul>

我的问题是图像属性数据缩放图像。只有当图像是屏幕上的图像时，有没有办法用树枝添加此属性？

喜欢具有特殊条件的{％if ...％} data-zoom-image {％endif％}？

由于

Answer 1

你应该使用Twig的循环变量，如the documentation中所述。在您的情况下，模板看起来非常像这样：

<ul class="bxslider">
    {% for datas, values in values['themes'] if datas == category %}
        {% for value, key in values %}
            <li>
                <img src="{{ asset(key.urllow) }}" class="photo-diapo" id="{{ value }}" {% if loop.first %}data-zoom-image="{{ asset(key.url) }}"{% endif %}/>

                <div class="addthis_sharing_toolbox"></div>

                <h3 class="photo-titre">{{ key.titre }}</h3>
                <h4 class="photo-date">{{ key.date }}</h4>
                <p class="photo-description">{{ key.description }}</p>
            </li>
        {% endfor %}
    {% endfor %}
</ul>

请注意，这只会修改您从视图中获取的HTML，这意味着您可以根据JavaScript代码和浏览器来确定此图像是否是第一个。我的回答是假设你自己照顾它。

Twig - 向当前元素添加属性

1 个答案: