How to show article labels as tags on articles

Wes Drury did all the work on this, I'm merely writing up a how-to for Swag rewards ;-)

Would you like to have your article labels visible to end users as tags*?
Sure you do, why else would you be here.

*) It won't work as a link to a list of other articles with the same label though (as you may know from blogs), only as pretty labels with text.

 

How it will look

Before we start

If you are unfamiliar with customizing your Help Center you may want to reference this article first ^.

If you have articles that already have labels on them, know that they will show up as soon as you publish these changes.

Labels were not made for this purpose, many use labels to add search words to an article that is not already part of the title or body text, so keep that in mind if you want to try this out.

What to do

To get started navigate to: 

General > Customize design

and click the Edit theme link.

Copy the following piece of code from Wes.

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

Insert it the Article template, I entered it below the body of the article, but other places may fit better with your preference.

Next copy the CSS below:

.tags {
list-style: none !important;
margin: 0;
overflow: hidden; 
padding: 0;
display: inline-flex;
}


.tag {
background: #808080;
border-radius: 3px 0 0 3px;
color: #fff;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
margin-left: 5px;
}

.tag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 5px;
position: absolute;
width: 6px;
top: 10px;
}

.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #808080;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}

Insert it in the CSS page. I did it at the top from line 3.

Save and Publish.

See if it's working

Once the above is set up, create an article and give it some labels and see what it looks like.

Also, see Brad's comment below about how to add functionality to make each label open a pre-populated search so users can easily find other articles with that label.