i got the following loop
{% set services = { "ceoCentralServices": ceoCentralServices, "cfoCentralServices": cfoCentralServices, "cooCentralServices": cooCentralServices} %}
{% for events, serviceEvents in services %}
{% if serviceEvents %}
<div class="wrapItFine" style="background:purple;">
{% for event in serviceEvents %}
<div class="dialog" data-index="loop2{{ loop.index0 }}">
<li class="contentli">{{ event.value }}</li>
</div>
<div style="display:none;"
id="anmelden_boxloop2{{ counter }}{{ loop.index0 }}"
class="{{ event.value }}{{ loop.index0 }}" >
{% include 'ansprechpartnerSingle.twig' %}
</div>
{% endfor %}
</div>
{% endif %}
{% endfor %}
this returns 3 boxes with data-index="loop2+index.
the problem is, that i need in each loop a different value like loop2+index, loop3+index, loop4+index
i tried a set Counter and incrementing in the for loop which returned every time the same value.
feel free to downvote, like everytime :-)
in your second loop you can simply use
{{ loop.parent.loop.index0 }}
to get the index of the parent loop, which you can use instead of your counter
data-index="loop{{ loop.parent.loop.index0 }}{{ loop.index0 }}"
Related
I'm not familiar with timber at all, but am helping a friend finish up a project that was built with it. So any help would go a long way please!
I have only the first two tiers showing up. Is there a way to call on the child of a child?
I'm using the code here, and added to it another tier under child https://timber.github.io/docs/guides/menus/
{% if menu %}
<div class="header-menu-items">
<div class="header-menu-item mod-title">
<a href="{{ site.url }}" class="" rel="home">
<div class="header-item-logo">
<div class="sitelogo">{{ site.name }}</div>
</div>
</a>
</div>
{% for item in menu.get_items() %}
<div class="header-menu-item {{ item.current ? 'is-active' : '' }}">
<div class="header-menu-item-link">
<a target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
</div>
<div class="header-menu-item-triangle"></div>
<div class="header-menu-item-mega {{ item.section_colour ? " mod-#{item.section_colour}" : '' }}">
{% if item.master_object.thumbnail %}
<div class="mega-image mod-image" style="background-image: url( {{item.master_object.thumbnail.src('thumbnail') }} )">
{% else %}
<div class="mega-image">
{% endif %}
{{ item.title }}
</div>
<div class="mega-items">
{% for child in item.children %}
<div class="mega-item">
<a target="{{ child.target }}" href="{{ child.link }}">
<span class="mega-item-title">{{ child.title }}<br /></span>
<span class="mega-item-excerpt">Mega menu description lorem ipsum dolores</span>
</a>
</div>
{% for child in child.children %}
Just testing to see if it'll even show up first before applying style<br />
{{ child.title }}<br />
{% endfor %}
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
You can access menus several layers deep by nesting for loops inside of one another. Here is a code snippet that I have tested and works.
{% for item in menu__main.items %} {# This is the top level #}
<p>{{ item }}</p>
{% if item.children %}
{% for child in item.children %} {# 2nd Level #}
<p><em>{{ child }}</em></p>
{% if child.children %}
{% for third in child.children %} {# 3rd Level #}
<p><strong>{{ third }}</strong></p>
{% endfor %} {# for third in child.children #}
{% endif %} {# if child.children #}
{% endfor %} {# for child in item.children #}
{% endif %} {# if item.children #}
{% endfor %} {# for item in menu__main.items #}
I have added comments to the end of the lines to hopefully make this more clear. So at the top, you are looping through item in menu__main.items
Then to get the children inside of these, you loop through item.children since item is the variable that represents each nav item at the top/main level. You loop through item.children to get to the next level or the children inside of the main/top level.
Then to get inside of the third level, you loop through child.children since child is the variable that represents the 2nd level. We want to loop through the children of this 2nd level. so we do third in child.children. third is the variable that represents the items 3 levels down.
I hope you can see the pattern here and you can continue this even further if you have items at even deeper levels, although at some point it will probably get ridiculous. Like if you have items nested 5 or 6 levels deep.
Let me know if that makes sense and if not I will be more than happy to try and explain it another way if you still have questions.
Cheers
I have a Twig for loop using the batch filter to wrap every 2 elements in a container div. I want to add a classname to every 3rd and 4th div in this for loop. However it seems you can't use loop.index when using the batch filter. Is that correct? How do you access the index then when using the batch filter?
What I tried is this:
{% for batch in blog.articles | limit(6) | batch(2) %}
<div class="blog-art-wrap row-eq-height">
{% for article in batch %}
<div class="article {% if loop.index == 3 or loop.index == 4 %}some-class{% endif %}">...... </div>
{% endfor %}
</div>
{% endfor %}
I also tried it with loop.index3 etc... But it just seems to ignore this.
Or is this because of the batches are in 2? So there's actually no index 3 and 4?? If so how do you access every 2nd batch then?
You could use the parent loop variable in order to refer to the parent context. As example:
{% for batch in blog.articles | batch(2) %}
<div class="blog-art-wrap row-eq-height">
{% for article in batch %}
<div class="article {% if loop.parent.loop.index == 3 or loop.parent.loop.index == 4 %}some-class{% endif %}">...... </div>
{% endfor %}
</div>
{% endfor %}
Try in this working twigfiddle.
Hope this help
try this:
{% set className = '' %}
{% if loop.index is divisibleby(3) or loop.index is divisibleby(4) %}
{% set className = 'some-class' %}
{% endif %}
<div class="article {{ className }}">...... </div>
Setting up a Drupal 8 custom view for Top 4 items, I want a different layout for item 1 than the remaining. I have override files for the custom view, but for this example I'm using base files to keep it simple.
In views-view.html.twig base file we have:
<div class="view-content">
{{ rows }}
</div>
In node.html.twig base file we have:
<div {{ content_attributes.addClass('content') }}>
{{ content }}
</div>
In node.html.twig I am aiming for something like:
{% if row_counter = 1 %}
output this markup / fields
{% else %}
do something boring with the other 3 items.
{% endif %}
I was able to set row_counter in the views-view.twig.html file:
{% for row in rows %}
{% set row_counter = loop.index %}
<div{{ row.attributes }}>
{{ row_counter }}
</div>
{% endfor %}
But I need to check against the value of {{ row_counter }} in the node.html.twig file....
What other properties are available in node.html.twig to check against its position in the list?
From the documentation
The loop variable
Inside of a for loop block you can access some special variables:
Variable Description
-----------------------------------------------------------------
loop.index The current iteration of the loop. (1 indexed)
loop.index0 The current iteration of the loop. (0 indexed)
loop.revindex The number of iterations from the end of the loop (1 indexed)
loop.revindex0 The number of iterations from the end of the loop (0 indexed)
loop.first True if first iteration
loop.last True if last iteration
loop.length The number of items in the sequence
loop.parent The parent context
edit: every variable know in the parent template is also known inside an include as context is passed by default. Only macro's don't know the parent's context
controller
<?php
require __DIR__ . '/../requires/propel_standalone.php';
echo $twig->render('tests/items.html', [
'items' => [
'Abc',
'def',
'ghi',
'jkl',
'mno',
'pqr',
'stu',
'vwx',
'z',
],
]);
items.twig
<!doctype>
<html>
<head><title>Test</title></head>
<body>
{% for item in items %}
{% include "tests/item.html" %}
{% endfor %}
</body>
</html>
item.twig
{% set order = 'Nothing to report' %}
{% if loop.first %}
{% set order = 'I\'m first' %}
{% endif %}
{% if loop.last %}
{% set order = 'I\'m last' %}
{% endif %}
{% if loop.index is even %}
{% set order = 'I\'m even' %}
{% endif %}
{% if loop.index is divisible by(5) %}
{% set order = 'I can be dived by 5' %}
{% endif %}
{% if loop.index is divisible by(3) %}
{% set order = 'I can be dived by 3' %}
{% endif %}
<div>
<b>{{ loop.index }}:</b>{{ order }} - {{ item }}
</div>
You could do something like this if a class is enough:
Your views template:
{% for row in rows %}
<div class="{% if loop.index == 1 %}first_element{% endif %}">
{{ row.content }}
</div>
{% endfor %}
And then just style it appropriately.
I used the nl2br filter like this:
{{ knp_pagination_render(requests)|raw|nl2br}}
It prints the html object separated by a few line breaks, and I need to print all the objects in one single line. How can I reach that?
Any help would be great.
{{ string | replace({"\\n":""}) }}
See fiddle.
I suggest you to override the default pagination template, so you can customize how to generate the underling HTML code.
As described in the doc You can do simply:
{{ knp_pagination_render(request, 'MyBundle:Pagination:pagination.html.twig') }}
You can copy the current pagination implementation from here and customize it as you need.
This is the default implementation:
{# default Sliding pagination control implementation #}
{% if pageCount > 1 %}
<div class="pagination">
{% if first is defined and current != first %}
<span class="first">
<<
</span>
{% endif %}
{% if previous is defined %}
<span class="previous">
<
</span>
{% endif %}
{% for page in pagesInRange %}
{% if page != current %}
<span class="page">
{{ page }}
</span>
{% else %}
<span class="current">{{ page }}</span>
{% endif %}
{% endfor %}
{% if next is defined %}
<span class="next">
>
</span>
{% endif %}
{% if last is defined and current != last %}
<span class="last">
>>
</span>
{% endif %}
</div>
{% endif %}
I pretty new to Twig first of all!
I'm trying to loop through an array of products, like so:
{% for product in products %}
What I further try to do is to check if one of the product.title equals the name lookbook.
if so then this product cannot be showed in my template/page. The things I tried just display an empty div instead of not showing anything.
Is there any way to accomplish this?
What I have so far:
{% for product in products %}
{% if product.title == 'lookbook' %}
.... dont show?? ....
{% else %}
<div class="product>
<h3>{{ product.fulltitle }}</h3>
<a href="{{ product.url | url }}" title="{{ product.fulltitle }}">
<img src="{{ product.image | url_image('220x220x2', product.fulltitle) }}" />
</a>
</div>
{% endif %}
{% endfor %}
I also tried:
{% for product in products and product.title != 'lookbook' %}
Thanks in advance!
Official doc :
{% for user in users if user.active %}
<li>{{ user.username|e }}</li>
{% endfor %}
In your case :
{% for product in products if product.title != 'lookbook' %}
Update 08/2021
Tip
As of Twig 2.10, use the filter filter instead, or an if condition
inside the for body (if your condition depends on a variable updated
inside the loop and you are not using the loop variable).
Try:
{% for product in products %}
{% if product.title != 'lookbook' %}
<div class="product>
<h3>{{ product.fulltitle }}</h3>
<a href="{{ product.url | url }}" title="{{ product.fulltitle }}">
<img src="{{ product.image | url_image('220x220x2', product.fulltitle) }}" />
</a>
</div>
{% endif %}
{% endfor %}