1

I want to make a tabbed content section of book citations where the tabs are years, made from categories. I am using a model I found in the cookbook here, which seems to be exactly what I am trying to do. http://craftcookbook.net/recipes/330

So far, I have the resulting citations listing in the proper order, but the tab ID that is exported in the resulting html does not give the slug [which is a year], but rather a consecutive number, always 0,1,2,3,etc. … Like id=“0”, instead of id=“2016” SO the panel container does not display the correctly when the tab is clicked, instead it displays all entries , instead of only those from 2016, for example.

I'm close, but not quite there, and stumped as to why the html ends up with a number instead of the year/category. Here is the code I have, largely taken from the cookbook:

<div class="light-wrapper">
<div class="container inner">
{% set entriesByCat = {} %}
{% set entries = craft.entries.section('newsArchive') %}
{% set cats = craft.categories.group('newsArchive') %}

{% for cat in cats %}
{% set entries = entries.relatedTo(cat) %}
    {% if entries|length %}
        {% set entriesByCat = entriesByCat|merge({ (cat.slug): entries }) %}
    {% endif %}
{% endfor %}

{% if cats|length %}
<div class="tabs tabs-side tab-container">
    <ul class="etabs">
    {% for cat in cats %}
        <li class="tab"><a href="#{{ cat.slug }}">{{ cat.title }}</a></li>
    {% endfor %}
    </ul>

    {% for catSlug, catEntries in entriesByCat %}
    <div class="panel-container">
        <div id="{{ catSlug }}" class="tab-block" >

            {% for entry in catEntries %}
            <ul class="circled" >
                {% for block in entry.bibliography %}       
                    {% if block.type == "biblioBook" %}
                <li>{{ entry.authorLast }}, {{ entry.authorFirst }}. <strong>{{ entry.title }}</strong>. {{ block.publisherCity }}: {{ block.publisherName }}, {{ block.publicationDate.format('Y') }}. Print.</li>
                    {% endif %} 
                {% endfor %}
            </ul>
            {% endfor %}
        </div>
        <!-- /.tab-block --> 
    </div>
    <!-- /.panel-container --> 
{% endfor %}
     </div>
     <!-- /.tabs --> 
    {% endif %}
</div>
<!-- /.container --> 

And the resulting HTML:

<div class="light-wrapper">
<div class="container inner">
    <div class="tabs tabs-side tab-container">
        <ul class="etabs">
            <li class="tab"><a href="#2016">2016</a></li>
            <li class="tab"><a href="#2015">2015</a></li>
            <li class="tab"><a href="#2013">2013</a></li>
        </ul>
        <div class="panel-container">
            <div id="0" class="tab-block" >
                <ul class="circled" >
                    <li> Author, A. <strong>”TITLE.”</strong> <em>Random House</em> 04 April 2016: . Print.</li>
                </ul>
                <ul class="circled" >
                    <li> Author, B. <strong>”TITLE.”</strong> <em> Random House </em> 04 June 2016: . Print.</li>
                </ul>
            </div>
        </div>
        <div class="panel-container">
            <div id="1" class="tab-block" >
                <ul class="circled" >
                    <li> Author, C. <strong>”TITLE.”</strong> <em> Random House </em> 04 May 2015: . Print.</li>
                </ul>
            </div>
        </div>
        <div class="panel-container">
            <div id=“2” class="tab-block" >
                <ul class="circled" >
                    <li> Author, D. <strong>”TITLE.”</strong> <em> Random House </em> 04 Oct 2013: . Print.</li>
                </ul>
            </div>
        </div>
        <!-- /.panel-container --> 
    </div>
    <!-- /.tabs --> 
</div>
<!-- /.container --> 

1

The problem is that your category slugs (which double as array keys) are integers (i.e. years). I'm not sure exactly what happens, but Twig doesn't handle integer keys very well and actually seems to "normalize" the keys (i.e. the first numeric key, for example 2012, will become 0, the second numeric key will be 1, etc – this happens to the numeric keys even if you have both numeric and non-numeric keys in your array).

In any case, the workaround is to prefix the slugs with an arbitrary character (or string) when you use them as array keys, and then remove that arbitrary character when you print the key later (i.e. your catSlug variable). Something like this:

{% set entriesByCat = entriesByCat|merge({ ('%'~cat.slug): entries }) %}

...

<div id="{{ catSlug|trim('%') }}" class="tab-block">
  • That totally did the trick, man this page is beautiful now [and functional]. Thanks for the explanation. And I did need to add that 'trim' to the tab itself of as well – Den Bell Aug 4 '16 at 20:34
  • That's great @DenBell – happy it helped you out. – Mats Mikkel Rummelhoff Aug 4 '16 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.