<p>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:</p>

<pre><code>{% set categories = craft.categories.relatedTo(entry) %}
</code></pre>

<p>with this:</p>

<pre><code>{% set category = craft.categories.relatedTo(entry).first %}
</code></pre>

<p>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):</p>

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

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

CC BY-SA 3.0
2017-02-21T13:19:11.573Z
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
CC BY-SA 3.0
2017-02-21T15:33:15.797Z
Good to know you got there!
Clive Portman
CC BY-SA 3.0
2017-02-01T11:20:28.567Z
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
CC BY-SA 3.0
2017-02-01T13:17:11.573Z
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
CC BY-SA 3.0
2017-02-07T10:29:27.810Z
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
CC BY-SA 3.0
2017-02-09T09:04:41.403Z
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
CC BY-SA 3.0
2017-01-31T17:42:16.733Z
2017-01-31T17:42:16.733Z
Clive Portman
<p>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?</p>

<p>Here is my code so far:</p>

<pre><code>{% 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 #}

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

    {% else %}

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

    {% endif %}
{% endfor %}
</code></pre>

<categories><category><markup>
Change markup depending on category of an entry
# Change markup depending on category of an entry

(Asked by: username_0 on 2017-01-31)

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 #}

    
        {{ entry.title }}
        {% set info = entry.info|nl2br %}
        {{ info|raw }}
        {{ entry.body }}
    

    {% else %}

    
        {{ entry.title }}
        {% set info = entry.info|nl2br %}
        {{ info|raw }}
        {{ entry.body }}
        
            {% for image in entry.images %}
            
            {% endfor %}
        
    

    {% endif %}
{% endfor %}

**Tags:** categories, category, markup

---

## 1 answers

### Answer by username_1 on 2017-01-31. Score: 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 %}
    
        {% for image in entry.images %}
            
        {% endfor %}
    
{% endif %}

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

> **Comments:**
> **username_0**: 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 …  
> **username_1**: 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?  
> **username_0**: 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!  
> **username_1**: 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.  
> **username_0**: 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!  
> **username_1**: Good to know you got there!  

---

