html - Bootstrap 列的 Twig 图片库算法

Question

您好，我正在尝试使用具有宽度算法的 Twig 和 Bootstrap 创建照片库。例子:我希望它清晰，每个部分都用较粗的黑线分隔。

所以我尝试了很多事情，但现在看来我接近解决方案但它仍然无法正常工作这是我的代码 atm:

    <section>
        <div class="row row-no-gutter">
            {% setcontent miniaanbod = "aanbod" %}
            {% for items in miniaanbod|reverse %}

                {% set cols = 3 %}
                {% set totaal = miniaanbod|length %}

                {#  this is the beginning.  #}
                    {% if totaal - cols <=0 %}   {# if the total is less than 0 it means it is 1 or 2. so my colwidht would be or 6 or 12 #}

                        {% set colwidth = 12/totaal %} {# expected that totaal is 1 or 2 here #}

                    {% else %}

                        {% set totaal = totaal - cols %} {# expected that if the totaal is 4 it takes of 3 and goes back to the begining with 1. so the first IF statement can catch it. #}
                        {% set colwidth = 12/3 %} {# expected that totaal is 3 here so most likely I can just do 12/3 so I did that #}

                    {% endif %}

                {#{{ dump(colwidth) }}#}
                <div class="col-sm-6 col-md-{{ colwidth }}">
                    <div class="product">
                        <img src="{{ image(items.gallerij[0].filename, 1620, 880) }}" alt="">
                        <div class="product__cnt">
                            <h5 class="uppercase">{{ items.type }}</h5>
                            <ul class="pricing-table">
                                <li>Prijs : <span class="price">{{ items.prijs }}</span></li>
                            </ul>
                            <span class="link"><a href="/aanbod/{{ items.slug }}">Continue</a></span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </section>

它的作用是将所有图片更改为 col-md-4 但它应该做的是在每 3 个元素之后它必须返回到 if 的开头> 声明。但我似乎无法重新开始。我还尝试将另一个 for 循环放在另一个 for 循环中，让它在每个元素之后返回到开头，但它总是创建 col-md- 12 因为它一次只有一项。

Answer 1

经过 2 小时的反复尝试。我终于创建了解决方案。

    <section>
        <div class="row row-no-gutter">
            {% setcontent miniaanbod = "aanbod" %}

                {% set teller4 = 0 %}
                {% set teller6 = 0 %}

                {% set breedte = 0 %}
                {% set alles = miniaanbod|length %}
                {% for item in miniaanbod|reverse %}
                    {% if (alles >= 3 ) or (teller4 is not divisible by(3)) %}
                        {% set breedte = 4 %}
                        {% set teller4 = teller4 + 1 %}
                        {% set alles = alles - 1 %}
                    {% elseif (alles > 1) or (teller6 is not divisible by(2)) %}
                        {% set breedte = 6 %}
                        {% set teller6 = teller6 + 1 %}
                        {% set alles = alles - 1 %}
                    {% else %}
                        {% set breedte = 12 %}
                        {% set alles = alles - 1 %}
                    {% endif %}

                    <div class="col-sm-6 col-md-{{ breedte }}">
                        <div class="product">
                            <img src="{{ image(item.gallerij[0].filename, 1620, 880) }}" alt="">
                            <div class="product__cnt">
                                <h5 class="uppercase">{{ item.type }}</h5>
                                <ul class="pricing-table">
                                    <li>Prijs : <span class="price">{{ item.prijs }}</span></li>
                                </ul>
                                <span class="link"><a href="/aanbod/{{ item.slug }}">Continue</a></span>
                            </div>
                        </div>
                    </div>
                {% endfor %}
        </div>
    </section>

这非常有效，并且已经过测试。我希望这对其他人有用。稍后