Showing tag name from image field

Kirby 2 Solved ✅
1

I would need to group some images of section page in catégories with help of tags and show the differents tags name.

In my blueprint I use:

files:
  sortable: true
  size: 250000
  fields
    tags:
      label: tags
      type:  tags

and in the template:

<ul>
  <?php foreach($data->image()->tags() as $tag): ?>
  <li><?php echo $tag ?></li>
  <?php endforeach ?>
</ul>

What happens is that only one tag appears in the ul, and also the name of the section appears as a tag.
I tried differents ways but nothing to do to make it correctly.

Thank you for your help.

2

To get all the tags, you first need to fetch all tags into an array by splitting the tags string:

<ul>
  <?php 
  $tags = $data->image()->tags()->split();
  foreach($tags as $tag): ?>
  <li><?php echo $tag ?></li>
  <?php endforeach ?>
</ul>
3

hmm still shows only one of the tags :frowning: but there is no more error.
I wonder if I did not do something wrong somewhere else…

4

So, I guess $data is a section page. Does each image only have one tag? And do you want to get the tags of all images then? If so, you would have to loop through all the images and fetch the tags …

$data->image() only fetches the first image of that page …

5

Yes all images will have 1 tag. If for exemple there are 9 images, 3 will share same tag, 3 an other etc.

In need to show the 3 tags names in the navigation (it is for a filtering gallery).

6

Ok, what you need then is a list of all unique tags of all the images? To get them, you can use the pluck method. Try this:

<ul>
  <?php foreach($data->images()->pluck('tags', null, true) as $tag): ?>
  <li><?php echo $tag ?></li>
  <?php endforeach ?>
</ul>
7

yes, exactly that. Thank you. One more “snippet” I’ve to note in my list of snippets to andertand :wink:
May I abuse a little? and in my ul li, to add the good tag per image in their own class how could I do?
for now I just show images like this:

       <?php foreach($data->images() as $image): ?>
            <li class="TheGoodTag">
        <div> 
        <a class="gallebox" href="<?php echo $image->url() ?>">
          <img src="<?php  echo $image->url() ?>"></a> 
       </div>
         </li>
       <?php endforeach ?>
8

What is “TheGoodTag”? Just the tag of the image? Then:

<li class="<?php echo $image->tag() ?>">
9

I already tried this, but tag name does not show.

10

Oops, sorry, the field is named tags so this should be:

<li class="<?php echo $image->tags() ?>">

instead.

But this can easily break if someone uses the tags field to add several tags, you cannot control that by using this field.

11

So, it works just great. Thank you for your Help.
About multiple tags, it still works, but add a , bettween tags, and in an html class it is not really good…
I’ll try to do the same maybe with a custom field in image but not tags, or maybe is there an easy way to limit the number of tags with the blueprint ?

12

No, you cannot limit the number of tags. Maybe use a select field instead? Would make more sense with class names?

13

Yes exactly, and now and can anderstand how to do it will be easier.