I would like to distribute my footer links into columns like this:
{% for column in cities|batch(4, null) %}
<ul>
{% for city in column %}
<li class="city-item"><a href="#">{{ city }}</a></li>
{% endfor %}
</ul>
{% endfor %}
https://twigfiddle.com/0h54xy/5
I can not, for the life of me, get this to work with _self.loop(pages) and am at a loss..
Shouldn't you put the class="col-md-4" on th ul ?
Yes, that would work if I could actually get the code above to work. I can not get the links returned from the navigation.html.twig to work with something like the example above. I've attached an example.
So you are wanting to have equal height columns, with a list of links in each, three columns in total? The example from the TwigFiddle, cities2.twig, seems to do this as expected, apart from the links. For the links, you just need to break the list into parts really, like this:
YAML
cities:
- name: London
url: http://london.england/
- name: Paris
url: http://paris.france/
- name: Berlin
url: http://berlin.germany/
- name: Madrid
url: http://madrid.spain/
- name: Warsaw
url: http://warsaw.poland/
- name: Rome
url: http://rome.italy/
- name: Lisbon
url: http://lisbon.portugal/
- name: Dublin
url: http://dublin.ireland/
- name: Marrakech
url: http://marrakech.Morocco/
- name: Cairo
url: http://cairo.egypt/
- name: Dubai
url: http://dubai.uae/
cities.twig.html
{% for column in cities|batch(4, null) %}
<ul>
{% for city in column %}
<li class="city-item"><a href="{{ city.url }}">{{ city.name }}</a></li>
{% endfor %}
</ul>
{% endfor %}
Returns
<ul>
<li class="city-item"><a href="http://london.england/">London</a></li>
<li class="city-item"><a href="http://london.france/">Paris</a></li>
<li class="city-item"><a href="http://london.germany/">Berlin</a></li>
<li class="city-item"><a href="http://london.spain/">Madrid</a></li>
</ul>
<ul>
<li class="city-item"><a href="http://london.poland/">Warsaw</a></li>
<li class="city-item"><a href="http://london.italy/">Rome</a></li>
<li class="city-item"><a href="http://london.portugal/">Lisbon</a></li>
<li class="city-item"><a href="http://london.ireland/">Dublin</a></li>
</ul>
<ul>
<li class="city-item"><a href="http://london.Morocco/">Marrakech</a></li>
<li class="city-item"><a href="http://london.egypt/">Cairo</a></li>
<li class="city-item"><a href="http://london.uae/">Dubai</a></li>
</ul>
Yes, but I believe my explanation of my desired result is not making it across.
I need it to work with the navigation code. Thus being dynamic. When someone adds a new page it won't break the footer layout. A static Yaml solution won't do.
It shouldn't be this difficult to achieve.
<ul>
{% macro loop(page) %}
{% for p in page.children.visible %}
{% if p.children.visible.count > 0 %}
<li>
<a href="{{ p.url }}">{{ p.menu }}</a>
{{ _self.loop(p) }}
</li>
{% else %}
<li class="{{ current_page }}">
<a href="{{ p.url }}">{{ p.menu }}</a>
</li>
{% endif %}
{% endfor %}
{% endmacro %}
{{_self.loop(pages)}}
</ul>
---
I take it you want to loop over pages (visible ones), and split the result into batches. Then iterate over each page in a batch, and output a list of links (with names). Something like this:
Batch with a set number (4) of pages per column (max 3)
{% for pages in pages.children.visible |batch(4, null) |slice(0, 3) %}
<ul>
{% for page in pages %}
<li>
<a href="{{ page.url }}">{{ page.menu }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
Batch with a set number (3) of columns
{% for pages in pages.children.visible |batch(pages.children.visible|length / 3) %}
<ul>
{% for page in pages %}
<li>
<a href="{{ page.url }}">{{ page.menu }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
The first of course limited in that if there are more than 12 pages, they will not be included. The latter seems more apt, but a larger number of pages would of course mean longer (higher) columns, unless you filter the pages.
Thank you so much! This is exactly what I need.
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 0 | 1333 | 9 years ago | ||
| 2 | 924 | 9 years ago | ||
| 2 | 4055 | 9 years ago | ||
| 1 | 2935 | 9 years ago | ||
| 3 | 1111 | 9 years ago |