1

Anyone able to direct me on this? I have a page that allows you to pick related entries (cables) within the page I want to output the related entries (cables) but group them by their category. I have the following code by this is adding each cable into each category and not just the cable within the right category.

<div class="container // island-bottom">
    {% set categories = craft.categories.group('cables') %}

    {# {% set cables = craft.entries.section('cables').order('title').limit(null) %} #}

    {% set cables = entry.cables %}

    {% for entry in cables %}
        {{ entry.title }}
    {% endfor %}

    {% for category in categories.relatedTo(cables) %}
        <div class="cableGroup">
            <h2 class="panel__title">{{ category }}</h2>
            <div class="cableGroup__description content // margin-bottomX2">
                {{ category.description }}
            </div>

            <ul>
                {% for entry in cables %}
                    <li class="cable">
                        <a href="#{{ entry.title|camel|upper }}" data-title="{{ entry.title }} &#xa;">
                            <img src="/assets/img/tmp/cable.jpg" alt="{{ entry.title }}">
                            <h3 class="cable__tag">{{ entry.title }}</h3>
                        </a>
                    </li>
                {% endfor %}
            </ul>

            {% for entry in cables.relatedTo(category) %}
                <div id="{{ entry.title|camel|upper }}" class="modal">
                    <div class="modal__close">
                        <a href="#close" title="Close" class="modal__closeBtn">
                            <span class="label close"><span class="icon-close heavy"></span>Close</span>
                        </a>
                    </div>
                    <div class="modal__content // cable__modal">
                        <div class="cable__img">
                            <img src="/assets/img/tmp/cable.jpg" alt="{{ entry.title }}">
                        </div>

                        <div class="cable__content">
                            <h3 class="cable__title">
                                {{ entry.title }}
                            </h3>
                            <p>{{ entry.cableDescription }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endfor %}
</div>
2

Your example is a trifle confusing, but in answer to your general question about grouping entries by a category field, Tim Kelty's groupBy plugin may help.

For example:

{% set groupedEntries = allEntries|groupBy('myCategoryField.title', 'Oddments') %}
{% for categoryTitle, categoryEntries in groupedEntries %}
    <h2>{{ categoryTitle }}</h2>

    {% for categoryEntry in categoryEntries %}
        {{ categoryEntry.title }}
    {% endfor %}
{% endfor %}
  • Thanks Stephen. Is this not possible without a plugin? – Terry Upton Mar 10 '17 at 9:55
  • I have this working, in that they are grouped and only those entries showing but I can't seem to be able to also show the description for each category as well as the title? Any ideas? – Terry Upton Mar 10 '17 at 10:39
  • Ah, right. If you need additional information about the category (such as the description), the above won't work. This Craft Cookbook recipe should point you in the right direction. – Stephen Lewis Mar 10 '17 at 11:52
1

With the use of Tim Kelty's groupBy plugin and some initial direction from @stephenlewis (thanks). The following code seems to have resolved my issue. I am little surprised this couldn't be achieved natively though. Unless there is a native solution, but I tried various approaches.

<div class="container // island-bottom">

{% set cables       = entry.cables.find() %}
{% set cableCats    = craft.categories.group('cables') %}

{% set groupedEntries = cables|groupBy('cableCategory.title') %}
{% for cableGroups in groupedEntries %}
<div class="cableGroup">
    {% for category in cableCats.relatedTo(cableGroups) %}
    <h2 class="panel__title">{{ category.title }}</h2>
    <div class="cableGroup__description content // margin-bottomX2">
        {{ category.description }}
    </div>
    {% endfor %}

    {% for cable in cableGroups %}
        {% if loop.first %}<ul>{% endif -%}
            <li class="cable">
                <a href="#{{ cable.title|camel|upper }}" data-title="{{ cable.title }} &#xa;">
                    <img src="/assets/img/tmp/cable.jpg" alt="{{ cable.title }}">
                    <h3 class="cable__tag">{{ cable.title }}</h3>
                </a>
            </li>
        {% if loop.last %}</ul>{% endif %}
    {% endfor %}

    {% for cable in cableGroups %}
        <div id="{{ cable.title|camel|upper }}" class="modal">
            <div class="modal__close">
                <a href="#close" title="Close" class="modal__closeBtn">
                    <span class="label close"><span class="icon-close heavy"></span>Close</span>
                </a>
            </div>
            <div class="modal__content // cable__modal">
                <div class="cable__img">
                    <img src="/assets/img/tmp/cable.jpg" alt="{{ cable.title }}">
                </div>

                <div class="cable__content">
                    <h3 class="cable__title">
                        {{ cable.title }}
                    </h3>
                    <p>{{ cable.cableDescription }}</p>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endfor %}
</div> 

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.