Using loop for with slice to show elements in two columns

1

Hi.
I would like to display three social icon elements divided into two columns with a for statement.
The HTML output should look like this:

<ul class = "divided icons col-6 col-12-mobile">
<li class = "icon brands fa-twitter"> <a href="#"> <span class = "extra"> twitter.com/ </span> untitled </a> </li>
<li class = "icon brands fa-facebook-f"> <a href="#"> <span class = "extra"> facebook.com/ </span> untitled </a> </li>
<li class = "icon brands fa-dribbble"> <a href="#"> <span class = "extra"> dribbble.com/ </span> untitled </a> </li>
</ul>
<ul class = "divided icons col-6 col-12-mobile">
<li class = "icon brands fa-instagram"> <a href="#"> <span class = "extra"> instagram.com/ </span> untitled </a> </li>
<li class = "icon brands fa-youtube"> <a href="#"> <span class = "extra"> youtube.com/ </span> untitled </a> </li>
<li class = "icon brands fa-pinterest"> <a href="#"> <span class = "extra"> pinterest.com/ </span> untitled </a> </li>
</ul>

The css class ‘divided’ is the one that delimits each row with a line below.

In the twig file I have the following code:

<ul class = "divided icons col-6 col-12-mobile">
{% for item in theme_config.social%}
    <li class = "icon brands fa - {{item.icon}}"> <a href="[[ item.url }-lex.europa.eu"> <span class = "extra"> {{item.name}} </ a > </li>
{% endfor%}
</ul>

With this code I would apply the class ‘divided’ to a single column, and my goal is to make it appear as in the HTML code shown.

How could I do it with a for loop and slice?

Thanks

2 
<ul class = "divided icons col-6 col-12-mobile">
{% for item in theme_config.social%}
    <li class = "icon brands fa - {{item.icon}}">
        <a href="[[ item.url }-lex.europa.eu"> <span class = "extra"> {{item.name}} </ a > 
    </li>
    {% if not loop.last and loop.index === (loop.length + 1) // 2 %}
        </ul>
        <ul class = "divided icons col-6 col-12-mobile">
    {% endif %}
{% endfor%}
</ul>

This will divide into 2 <ul/> tags evenly (or one less item if odd count)

1 Like
3

Hi @Karmalakas
Thanks so much for your help. This works perfectly but I get an error with === in loop. So, the final code is:

<ul class = "divided icons col-6 col-12-mobile">
{% for item in theme_config.social%}
    <li class="icon brands fa-{{item.icon}}">
        <a href="{{ item.url }}"> <span class="extra">{{item.name}}</a> 
    </li>
    {% if not loop.last and loop.index == (loop.length + 1) // 2 %}
        </ul>
        <ul class="divided icons col-6 col-12-mobile">
    {% endif %}
{% endfor%}
</ul>

Thanks again.

4

Ah, right :slight_smile: It’s Twig and strict comparison here would be

{% if not loop.last and loop.index is same as((loop.length + 1) // 2) %}

But yes, == in this case will work perfectly fine

5

Thanks, this is correct code line. Finally the code would be:

<ul class = "divided icons col-6 col-12-mobile">
{% for item in theme_config.social%}
    <li class="icon brands fa-{{item.icon}}">
        <a href="{{ item.url }}"> <span class="extra">{{item.name}}</a> 
    </li>
    {% if not loop.last and loop.index is same as((loop.length + 1) // 2) %}
        </ul>
        <ul class="divided icons col-6 col-12-mobile">
    {% endif %}
{% endfor%}
</ul>