用于自举列的Twig图像库算法 [英] Twig image gallery algorithm for bootstrap columns
问题描述
你好,我正在尝试使用具有宽度算法的树枝和引导来创建一个foto图库。
例如:
我希望清楚的每一部分都用粗黑线表示。
Hello I am trying to create a foto gallery using twig and bootstrap that has an algorithm for width. Example: I hope its clear every section is devided by a thicker black line.
所以我尝试了所有的东西,但现在看起来接近解决方案,但它仍然不能正常工作这是我的代码atm:
So I tried allot of things out but now it seems im close to the solution but its still not working properly this is my code 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个项目之后,如果语句返回到的开头。但我似乎不能重新开始。我还尝试为循环在循环内放置另一个
循环,以使它在每个项目后返回到开头但它总是会创建
col-md-12
,因为它一次只有一个项目。
what this does it changes all the pictures to col-md-4
but what it should do is after every 3 items it has to return to the start of the if
statement. but I cant seem to get it to the beginning again. I also tried to put another for
loop inside the other for
loop to get it to return to the beginning after every item but then it always creates col-md-12
becouse it only has one item at a time.
推荐答案
经过2个多小时的尝试和错误。我最终创建了解决方案。
After 2 hours of more try and error. I finally created the solution.
<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>
这个功能完美并且已经过测试。我希望这对其他人很有用。稍后再onn
this works perfectly and it has been tested. I hope this is ussefull to someone else. later onn
这篇关于用于自举列的Twig图像库算法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!