General

Using loop for with slice to show elements in two columns

Started by Pedro M 5 years ago · 4 replies · 437 views

5 years ago

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:

HTML

<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:

TWIG

<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

5 years ago

TWIG

<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)

last edited 12/13/21 by Karmalakas

5 years ago

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

TWIG

<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.

5 years ago

Ah, right :) It's Twig and strict comparison here would be

TWIG

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

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

5 years ago Solution

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

TWIG

<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>

last edited 12/13/21 by Pedro M

Topic	Replies	Views	Activity
Well done Grav Team General · by Jerry Hunt, 4 days ago	2	133	1 day ago
Grav 2, Admin Next, API and Migrate are now in production! General · by pamtbaau, 1 day ago	1	93	1 day ago
Welcome to the new Grav Forums! General · by Andy Miller, 2 days ago	0	77	2 days ago
How active is Grav? General · by Marcel, 12 months ago	6	387	5 days ago
Contents in bin folder delete itself during core updates General · by Duc , 6 days ago	3	72	6 days ago

Suggested topics