Tags as separate items in an html list

Kirby 2 Solved ✅
1

Hello -
I’m not using tags for additional navigation (as proposed in the “Tags” section of the documentation). I simply want to use multiple tags to describe a project and style them as separate items in an html list.

In the Kirby installation default theme, the tags are simply something like this:

<b>Tags:</b> <?php echo $page->tags() ?>

And when you add an additional tag to the above, it ends up rather sloppy (it adds a comma between the tags, without a space).

I would just like to know how to list each tag as a separate<li></li> (with no comma).

Thanks.

2

You could try this, although I’m not sure if there’s a better way than using str::split()

<?php $tags = str::split($page->tags(),','); ?>
<ul>
  <?php foreach($tags as $tag): ?>
    <li>
      <?php echo html($tag) ?>
    </li>
  <?php endforeach ?>
</ul>
3

From the kirby Docs (http://getkirby.com/docs/cheatsheet/field-methods/split):

<ul>
  <?php foreach($page->tags()->split(',') as $tag): ?>
  <li><?php echo $tag ?></li>
  <?php endforeach ?>
</ul>
2 Likes
4

That’s indeed a better way

5

Hello, I am using checkbox selected categories, same as Kirby Portfolio project’s blueprint. Is there please a similar solution to also remove commas in case of multiple categories?

6

The solution is in fact the same as outline above, the categories from the checkboxes are saved in the content file as a comma separated string in the same way as when you use tags.

So this:

<ul>
  <?php foreach($page->tags()->split(',') as $tag): ?>
  <li><?php echo $tag ?></li>
  <?php endforeach ?>
</ul>

works for the result of a checkbox field as well.

7

Hi texnixe and thank you for your response.
I don’t seem to make it work with my configuration, or maybe my code is very bad, but should I still use the $page even if it’s an element within a $project ?
Here is my actual snippet which is predictably not working…

 <ul>
    <?php foreach(page('work')->children()->visible()->limit(8) as $project): ?>
    <li class="<?php foreach($project->categories()->split(',') as $tag) { echo $project->categories(); } ?>" >
    </li>
    <?php endforeach ?>
</ul>

Thanks for your help

8

That does not look quite correct. What exactly do you want to achieve here? Do you want to use classes as filters?

<ul>
    <?php foreach(page('work')->children()->visible()->limit(8) as $project): ?>
    <li class="<?php foreach($project->categories()->split(',') as $tag) { echo $tag; } ?>" >
    </li>
    <?php endforeach ?>
</ul>
9

Hi texnite, yes that’s exactly for the use of classes as filters as I’m making a portfolio using MixItUp.
Thanks again for your response, of course it had to be with the $tag variable in this case…! It did good removing the commas, now it did also remove spaces between the categories names… :sweat_smile:
Sorry my php approach is minimal, maybe there is something to do to keep those spaces between my classes?

10

The easiest way is to simply add a space after each tag:

 <li class="<?php foreach($project->categories()->split(',') as $tag) { echo $tag . ' '; } ?>" >

If you want to be super perfect, you can of course first check if there are more tags and only add the space if not.

<ul>
    <?php 
    $i = 0;
    foreach(page('work')->children()->visible()->limit(8) as $project): ?>
      <li class="<?php foreach($project->categories()->split(',') as $tag) { e($i <= count($project->categories()->split())-1, $tag . ' ', $tag); } ?>" ></li>
    <?php $i++; endforeach ?>
</ul>
11

Alternatively you can use implode():

<li class="<?php echo implode(' ', $project->categories()->split(',')) ?>">
6 Likes
12

Wow that implode method was just the thing! Thanks a lot for the great tip lukas :thumbsup:
Thank you also texnixe, that super perfect method deserves some investigation :yum:
Thanks guys