Global (editable) tags in panel possible?

Kirby 3 Solved ✅
,
1

Hi everyone.

What I’d like to achieve is a global source for tags. I read through the docs and found the following query.

 query: site.index.pluck("tags", ",", true)

I tried this query referencing another tag field which gave me the available tags from that field. So I set up a global tag field within my site blueprint and thought that I might be able to add the above query to every tag field, referencing the field name of this global tag field (siteTags).

Somehow my plan doesn’t work, though. I tried both with and without providing options in the global field. What I’m after is consistency with my tags throughout the site.

Is this even possible, or am I forgetting something? I’m guessing I would maybe have to alter the query, but don’t know in what direction.

Any hint is greatly appreciated.

2

If I understand you correctly, you want to define a set of tags in your site.yml that you can then query in other tags fields throughout the site?

What you query does, however, is query all fields named tag throughout all pages of the site.

So assuming you have this in your site blueprint

fields:
  siteTags:
    type: tags

Then you can query this field in other tags fields like so:

fields:
  tags:
    type: tags
    options:
      type: query
      query: site.siteTags.split

All documented here: Tags | Kirby CMS

3

Oh my. Thanks a lot @texnixe - I even read this article but somehow oversaw that specific point. I feel a bit silly. Sidenote: you were absolute right about what I’m trying to achieve.

4

Amazing! I managed to build global tags following your example. Thank You!

my project.yml:

project_tags:
  label: Project Type
  type: tags
  accept: options
  options: query
  query:
    fetch: site.global_tags.toStructure
    text: "{{ structureItem.tag }}"
    value: "{{ structureItem.tag }}"
  width: 2/3

my site.yml:

  settings:
    label: Settings
    icon: ✎
    fields:
      global_tags:
        label: Project Tag
        type: structure
        fields:
          tag:
            label: Tag Name
            type: text
          identifier:
            label: Tag Identifier
            type: slug
            wizard:
              field: tag

Wondering, is there a way to to make a widget that not only querys/fetches tags and accepts those options but also allows you to make new tags on the fly, that then get added to the global tag list in site.txt?

Basically, combining the default behaviour of the tags field with the query option, so that you have the best of both worlds: no dublicate tags that can be queried and the possibility to add tags from anywhere in the site to a globally accessible list.

I guess it’s easier if you have tags are just text strings. In my case they also have a color associated with each tag.

Similar to how Notion or GitHub issues handles it. (I’d link an image but somehow it doesnt work.)

5

Yes, you could update the structure field in site.txt via a page.update:after hook. Inside your hook, you check if the tags used in the current page are already present in the structure, and if not, add them.

However, I wonder if this is really the best approach and if it wouldn’t make more sense to merge global_tags with tags used in your project pages?

6

Ah wow, i was still editing and already got help :slight_smile: Thank you!

However, I wonder if this is really the best approach and if it wouldn’t make more sense to merge global_tags with tags used in your project pages?

Not sure if I understand what you mean, what’s would be the difference to what I described?

All my tags are currently in site.txt like this:

global_tags:

- 
  tag: Design
  identifier: Design
- 
  tag: Website
  identifier: Website
- 
  tag: Art
  identifier: Art
- 
  tag: Book
  identifier: Book
- 
  tag: Software
  identifier: Software
- 
  tag: App
  identifier: App
- 
  tag: Installation
  identifier: Installation
- 
  tag: Furniture
  identifier: Furniture
- 
  tag: Performance
  identifier: Performance

and i reference them in each project

----

Project-tags: Performance, Book, Website

----

(haven’t added the color option yet, and i guess identifier is kind of redundant as of now)

7

I wonder how this is supposed to work with the color option. I mean, the tags field allows you to either limit the options to your query, or to also let users add their own tags (which is the default behavior).

So a new tag added to a tags field is just a simple string. How does this make sense in the context of your structure field of global tags? You would only be able to fill the tag field in that structure, but how about the identifier (if it is not redundant), or a color option?

8

Ah sorry, yeah structured fields are a bonus right now

I’m just wondering if there is a way to: instead of either/or, have both options simultaneously:

  1. query a basic string from the global list
  2. and if your query is not in the global list you can add it to it as a new tag

And I guess for querying a structured item you would need some kind of custom wizard that lets you choose colors or any other option in that tag with a context menu. (That’s how GitHub issues and tags in Notion Tables do it—even if you don’t define a color it just gets randomly generated).

But even just being able to query and add a basic string/tag at the same time would make it already easier for editors so they don’t have to leave the current page go into the settings and add tags there.

9

Yes, as I already wrote above, that should be the default behavior of a tags fields, i.e. either pick from queried list or add another tag.

10

ohh, got it! Thank you! :pray:
I missed accept: all. My bad, sorry.

I got it to work for querying/adding basic string tags.

project_tags:
  type: tags
  accept: all
  options:
    type: query
    query: page.siblings.pluck("project_tags", ",", true)

Still, do you think you can point me into a direction for how to go about querying and adding structured items to a global list from within another page, for example a tag with an associated color, or let’s say a name with an associated external url.

Adding and querying tags with colors to/from a globally accessible list is possible in Notion and GitHub issues. I’m a little lost in what to even search for in the docs. I’d assume a custom field or blueprint, or page methods as you describe here?:

Or maybe this is not possible and I’m missing something fundmental about Kirby here?

11

That would only work if you use structure fields for both, i.e. in your central location, and in the pages themselves, but there is a caveat: Say in your structure field in the specific pages you have two fields:

projectTags:
  type: structure
  fields:
    tag:
      type: tags
      options:
        type: query
        query: 
          fetch: site.global_tags.toStructure
          text: "{{ structureItem.tag }}"
          value: "{{ structureItem.tag }}"
   color:
     type: text

So if you select a tag in the first field, you wouldn’t be able to also fetch the associated color value from the same tag on the fly, at least not without a custom implementation. It would work for adding a new tag-color pair, but not for the use case selecting from global.

12

ah ok, as long as I can add a color i wouldn’t necessaryly fetch it from a specific page, adding a tag-color pair might be enough. I’ll give it a try. Thank you!