1

I am trying to output a news section, where I want to display the news categories as classes of the article. That works fine. But I also want to change the markup for a certain category out of the group mainly for responsive layout issues as I use Bootstrap as framework. How would I do this?

Here is my code so far:

{% for entry in craft.entries.section('news').limit(5).find() %}
{% set categories = craft.categories.relatedTo(entry) %}

    {% if category.slug == 'media' %} {# ------- I MEAN THIS LINE, slug or ID would be perfect #}

    <article class="col-xs-12 col-sm-6 news {% for category in categories %}{{ category.slug }}{% endfor %}" id="{{ entry.slug }}">
        <h1>{{ entry.title }}</h1>
        {% set info = entry.info|nl2br %}
        <p class="info">{{ info|raw }}</p>
        {{ entry.body }}
    </article>

    {% else %}

    <article class="col-xs-12 news {% for category in categories %}{{ category.slug }}{% endfor %}" id="{{ entry.slug }}">
        <h1>{{ entry.title }}</h1>
        {% set info = entry.info|nl2br %}
        <p class="info">{{ info|raw }}</p>
        {{ entry.body }}
        <aside class="newsimages col-xs-12 col-md-6">
            {% for image in entry.images %}
            <img src="{{ image.getUrl('medium') }}" alt="{{ entry.title }}" class="col-xs-12{% if loop.first %}{% else %} col-sm-6{% endif %}" />
            {% endfor %}
        </aside>
    </article>

    {% endif %}
{% endfor %}
2

You're currently fetching an array of categories even if there's only one it, I think. You either need to loop through the array or try replacing this:

{% set categories = craft.categories.relatedTo(entry) %}

with this:

{% set category = craft.categories.relatedTo(entry).first %}

Alternatively, you could scrap the category conditional altogether and use entry types, with different entry types set up for different layouts (that's my preferred method). You could also try testing for the presence of images as well (because that seems to be the only difference in the markup):

{% if entry.images | length %}
    <aside class="newsimages col-xs-12 col-md-6">
        {% for image in entry.images %}
            <img src="{{ image.getUrl('medium') }}" alt="{{ entry.title }}" class="col-xs-12{% if loop.first %}{% else %} col-sm-6{% endif %}" />
        {% endfor %}
    </aside>
{% endif %}

Or have I misunderstood and it's the conditional you're having problems with?

  • Hi Clive! Thanks for your answer. Unfortunately no, there are several categories in the group and the .first only fetches the first one which could be maybe the wrong one. I thought of entry types, but a news entry should be able to have more than one category. Otherwise I would have gone the entry type route. The image won’t be the only difference, the markup is not final yet … – romadev Feb 1 '17 at 11:20
  • Okay. So, you've got multiple categories but only one of the them should show the News layout. Do you want the same entry to use a different layout if it comes up elsewhere in another category? Or do you just want to test for the News category and if it exists then use the News layout, otherwise use a standard layout? – Clive Portman Feb 1 '17 at 13:17
  • For this case I want to test against the News category only because it concerns layout changes only for the News entries which can't be solved with css only. But maybe someone else would be interested in the other case … ? Thanks for writing back! – romadev Feb 7 '17 at 10:29
  • Maybe just loop through an entry's category and set a variable like 'hasNewsCategory' if News is one of them. Then test for that later and display the appropriate markup. – Clive Portman Feb 9 '17 at 9:04
  • Makes sense and it worked! Sorry for the late answer … basically I already did it in my first code with the categories loop for the CSS classes. But without setting the variable for the one category. I somehow didn’t see the wood for the trees. Thanks! – romadev Feb 21 '17 at 13:19

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.