How to show article labels as tags on articles

No worries! You've still got access to the article labels in the section page so the code will be similar. In this screenshot from the section template, I've put the code block below the title link, which is within the #each section.articles helper. The only real change I've made is looping over "labels" instead of "article.lables" since we're already in the article object.

You'll need to make some changes to the CSS to get the labels appearing in the position you want them in, but this should get you moving in the right direction. 

Ah great stuff I think I prefer that. Thanks Tipene Hughes. Last question I promise. How would you display the the labels on the section page either before or after the article titles?

Hey Tom Perry,

Good call out on using JS, which is one option I would have suggested for this use case. The other would be using the if and compare helpers to conditionally render the list items in your article template - something like this:


<ul class="tags">
  Tags: {{#each article.labels}}
           {{#if (compare identifier "==" "your_identifier")}}
                   <li class="tag success">{{identifier}}<li>
                {{else}}
                   <li class="tag fail">{{identifier}}<li>
            {{/if}}
        {{/each}}
</ul>

For anyone interested I manage to achieve different coloured tags using some JS.

<ul>
  {{#each article.labels}}
  <li class="item">{{identifier}}</li>
  {{/each}}
</ul>

JS

$(document).ready(function () {
    $(".item:contains('Released')").addClass("released");
    $(".item:contains('In development')").addClass('indevelopment');
    $(".item:contains('Planned')").addClass('planned');
});

CSS style tags as you wish

.item {
color: black;
}

.released {
color: green;
}

.indevelopment {
color: orange;
}

.planned {
color: blue;
}

Thanks Tipene Hughes , I'm not quite show how that would work. How does the class identify the different tag in this code?

<ul class="tags">
Tags: {{#each article.labels}}
<li class="tag">{{identifier}}<li>
{{/each}}
</ul>

Did anyone manage to find a way of giving the labels different colours?

For example
Label: Success = green
Label: Fail = Red

This code will work on the Home Page / Promoted articles

{{#if labels}}
  {{#each labels}}
	<span>{{identifier}}</span>
  {{/each}}
{{/if}} 

Is it possible to list labels in the homepage?

I am creating popular keywords / labels listing, so tried to use the code from the example in this page but got the following error

-- not possible to access `article` in `article.labels --

Any help please ..?

Excellent thank you, Is it possible to turn each tag into a search result. not as per brad's addition. but clicking the tag will then complete the search.

For example.

Tags: Software Update

Clicking the software update tag will then provide search results for software update.

Thanks

Andrew