1

I followed this sample code from craft cookbook to display my entries grouped together by category within a category group.

To add some context, the site I'm working on is for a dictionary and the words in the dictionary are the main entries. There are several category groups that I use to classify the words. For example, words can belong to different themes: household items are in the household category, names of animals are in the nature category and so on. So far, here is the code I have below:

{% set entriesByCat = {} %}
{% set entries = craft.entries.section('words') %}
{% set cats = craft.categories.group(themes) %}

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

{% if cats|length %}
    {% for catTitle, catEntries in entriesByCat %}
        <div class="category-title">
          <h2>{{ catTitle }}</h2>
        </div>
        {% for entry in catEntries %}
          {# Entry content goes here... #}
          ...
        {% endfor %}
    {% endfor %}
{% endif %}

This works fine to output one field for the category (the category title). However, some of these categories have pictures associated with them, and I would like to be able to access those as well.

After the h2 tag I would like add a conditional to check if a category has an associated image in the "categoryImage" field for the category. If it does have an image I'd like to output the image.

I've been able to do this in other situations where I have more direct access to the category but I can't figure out how to access to the category image field within the loop structure that I have setup.

Any help would be greatly appreciated. I have to admit that I'm a bit beyond my depth with the twig template code above. :-)

2

Just focusing on the assets part I would try to eager-load the image and insert it into your template that way.

{% set entriesByCat = {} %}
{% set entries = craft.entries.section('words').find() %}
{% set cats = craft.categories.group(themes).find({
    with: ['categoryImage']
}) %}

{% for cat in cats %}
  {% set entries = entries.relatedTo(cat) %}
  {% set catImage = cat.categoryImage[0] ?? null %}
  {% if entries|length %}
    {% set entriesByCat = entriesByCat|merge({ (cat.title): { entries: entries, image: catImage}) %}
  {% endif %}
{% endfor %}

{% if cats|length %}
    {% for catTitle, catInfo in entriesByCat %}
        <div class="category-title">
          <h2>{{ catTitle }}</h2>
          <img src={{catInfo.image.url}}>
        </div>
        {% for entry in catInfo.entries %}
          {# Entry content goes here... #}
          ...
        {% endfor %}
    {% endfor %}
{% endif %}

You may want to change the naming convention a little bit, but I just wanted to try and stick to yours as is.

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.