Footer Layout

Archive
1

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…

2

Shouldn’t you put the class="col-md-4" on th ul ?

3

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.

Footer

4

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

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

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.

7

Thank you so much! This is exactly what I need.