CODEWITHSUNDEEP
rubyjekyllliquid
Brad
Brad

Reputation: 331

Looping over Jekyll collection page's tags - displaying without spaces

I'm trying to loop over a collection, display it's pages as links and on those links have each of that page's tags be distinct class names. I have everything working except for the fact that the tags jumble together without any spaces.

Here's how I have the tags in the front matter of a page:

tags:
- javascript
- jquery
- requires-springshare-auth-server
- client-side

Here's the liquid in my html:

<ul class="custom-dots">
   {% for libguide in site.libguides %}
     <li class="{{libguide.tags}}">   
        <a href="{{site.baseurl}}{{ libguide.url}}">{{libguide.title}}</a>
     </li>
    {% endfor %}
</ul>

And here's the rendered HTML as viewed through dev tools:

<li class="javascriptjqueryrequires-springshare-auth-serverclient-side">

Upvotes: 1

Views: 174

Answers (3)

David Jacquel
David Jacquel

Reputation: 52829

{{ libguide.tags }} returns a raw output for the array, but you can separate elements with a space using the join filter :

{{ libguide.tags | join: " " }}.

Upvotes: 2

Christian Specht
Christian Specht

Reputation: 36441

Use Liquid's join filter.

Simple example with just a single page:

---
title: blah
layout: default
tags:
- javascript
- jquery
- requires-springshare-auth-server
- client-side
---

<li class="{{ page.tags | join: ' ' }}">

The rendered HTML:

 <li class="javascript jquery requires-springshare-auth-server client-side">

Upvotes: 2

Rakib
Rakib

Reputation: 327

Try replacing {{libguide.tags}} with {{libguide | tags}}. It will display tags separated by comma.

Upvotes: 0

Related Questions