Is it possible to add a class based on tags?

The CMS Questions
1

We have pages that have been tagged using the Tags field:

services:
	label: Services
	type: tags
	accept: options
	options:
		- xyz
		- abc
		- bam

Each page can have one or more tags.

Is it possible to somehow add the tags as a class to list elements, like this?

<ul>
	<?php foreach (page('portfolio')->children()->listed() as $project): ?>
		<li class="xyz abc bam">
		</li>
	<?php endforeach ?>
</ul>
2

something like this?

<?php $tag = $project->services()->split(','): ?>
<li class="<?$tag ?>">

but that doesn’t work!

3

Would you like to output a tagcloud?

<?php

// fetch all tags
$tags = $page->children()->listed()->pluck('tags', ',', true);

?>
<ul class="tags">
  <?php foreach($tags as $tag): ?>
  <li>
    <a href="<?= url('blog', ['params' => ['tag' => $tag]]) ?>">
      <?= html($tag) ?>
    </a>
  </li>
  <?php endforeach ?>
</ul>
4

Hi, no not a tag cloud. I have a list of case studies and I’d like to add a class name to each list item based on the services the case study is tagged with. Some list items / case studies will have more than one tag.

5

Okay, I understand. I have achieved something similar with an isotope filter, where CSS classes are used as filter keywords. Without having tested the code, you could try this code or use it as a starting point:

<ul>
  <?php foreach (page('portfolio')->children()->listed() as $project): ?>
    <?php
      $tags = $project->services()->split();
      $classes = array_map(fn($t) => Str::slug($t), $tags);
    ?>
    <li <?= attr([
      'class' => implode(' ', $classes)
    ]) ?>>
      <?= $project->title() ?>
    </li>
  <?php endforeach ?>
</ul>

Result:

<ul>
  <li class="xyz abc">Projekt A</li>
  <li class="bam">Projekt B</li>
  <li>Projekt C</li>
</ul>
6

Hey, thanks I’ll look at it tomorrow. Thanks again

1 Like
7

This works

<ul>
	<?php foreach (page('portfolio')->children()->listed() as $project): ?>
		<?php $classList = implode(' ', $project->services()->split(',')); ?>
		<li class="<?= $classList ?>">
		</li>
	<?php endforeach ?>
</ul>

$project->services()->split(',')

returns an “array” of tags:

['branding', 'web-design', 'graphic-design']

I then need the “implode” to turn this array into a string of space separated tags:

$classList = implode(' ', $project->services()->split(','));

=

"branding web-design graphic-design"

which I can now use to add classes to the HTML

8

That’s pretty much what @GB_DESIGN wrote. Except running it also through Str::slug() - but if all your services names already work as class selectors, you can indeed skip that.

9

Oh okay, thanks