## Problem/motivation Tagify only provides field widgets, not field formatters. On display, entity reference fields still use core formatters such as "Label", so tags that look like Tagify pills in the edit form show up as plain links or text on the page. The entity ID and the info label set on the widget (including tokens and icons from `tagify_icons`) don't appear outside the form at all. The same applies to user reference fields that use the Tagify User List widget: the edit form shows each user's avatar and name, but on display only the user name is shown. ### Steps to reproduce 1. On Tagify 2.0.x, add an entity reference field (e.g. taxonomy terms) to a content type and set its widget to Tagify, with "Include entity id" and an info label turned on. 2. Add a user reference field and set its widget to Tagify User List. 3. Create content and reference a few terms and users. 4. Go to Manage display for the content type and open the fields' format options. **Expected:** Tagify formatters that render the references like the widgets do, including user avatars. **Actual:** only core formatters are available, and the content page shows a plain list of labels without the entity ID, info label or avatar. ## Proposed resolution Add a `tagify_entity_reference_formatter` field formatter for `entity_reference` fields. It renders the referenced entities with the same markup and styles as the widget. The output is static HTML and doesn't load the Tagify JavaScript, since nothing on the page is editable. Add a `tagify_user_list_entity_reference_formatter` in `tagify_user_list` that extends it with user avatars. ### Tagify formatter - **Settings:** - Link the label to the referenced entity (on by default). - Include the entity ID. - Include an info label, with token support and the token browser (without restricted tokens) when the `token` module is on. - **Same as the widget:** - The formatter invokes `hook_tagify_autocomplete_match_alter()` with the same context as `EntityAutocompleteTagify::getTagifyDefaultValue()`, so modules that change the label or info label render the same tag in the form and on display. - A hook may return a markup object instead of a string for the label or the info label, as `tagify_icons` does. - When the info label isn't resolved (turned off, or no access), hooks get an empty `info_label` template in the context, so they never act on a missing value. - Info labels follow `infoLabelMarkup()` in `js/tagify.js`: an image URL becomes an `<img>`, and SVG or image markup goes in the image wrapper. - Info label HTML is filtered through `TagifyHtmlFilterTrait`. If nothing is left after filtering, no info label is rendered. - **Info label tokens on public pages:** - Every token value becomes escaped plain text, formatted text included (e.g. `[term:description]`), so HTML in entity data renders as text. Image and SVG markup can only come from the info label template or an alter hook. A token value that is an image URL still renders as an image, as in the widget. - Tokens are only resolved when the user has full `view` access to the referenced entity, not just `view label`. For example, anonymous visitors without "access user profiles" don't see token data from referenced users. - Token values are not checked against field access (e.g. "view user email addresses"), since tokens offer no general way to do so. The info label setting's description says so and warns against tokens with private data. - Tokens are replaced in the language the tag is rendered in, so the info label matches the tag label (e.g. in Views rows rendered in another language). - **Access and caching:** - Referenced entities are checked for `view label` access. - Links are only rendered when the user has access to the URL. - Cacheability from the entities, tokens, `view` access and URL access bubbles up, also when every tag is filtered out. - **Theming:** - New `tagify_formatter` theme hook and `tagify-formatter.html.twig` template. The template renders a `<ul>`/`<li>` list that reuses the widget's tag classes, with classes in place of the widget's repeated IDs. Each tag can have an optional `avatar` image before the label. - New `tagify_styles` library: the Tagify CDN CSS only, without the JS. The README now notes that the formatter loads this stylesheet on front-end pages, and that it can be served locally. - New `formatter` library: `css/tagify.css` plus the new `css/tagify-formatter.css`. That stylesheet: - adds a bottom margin wider than the gap between tags, so two Tagify fields in a row stay apart in any theme; - turns off the widget's hover effect and "bump" animation; - keeps tag text selectable (the widget blocks selection while editing); - makes the whole pill clickable for linked tags; - adds hover colors that follow the theme's `--primary` / `--primary-foreground` properties when the theme defines them; - shows a focus-visible ring in the text color, so it stays visible on any background. These rules need `:has()`; browsers without it keep the link's own focus outline. ### Tagify User List formatter - Offered only for entity reference fields that target users. - Extends the Tagify formatter, so linking, entity ID, info label, access and caching work the same. - **Settings:** avatar image field and image style, the same as the Tagify User List widget. The image style can be left empty. - **Avatar:** resolved through `UserImageResolver`, from an image field or a media field. The module's `no-user.svg` default image is shown instead when: - the visitor can't view the user (e.g. without "access user profiles"); - the visitor can't view the image field, or the media item (e.g. unpublished media); - the user has no image, or no image style is set. - The default image URL is built with the file URL generator, so it also works on sites installed in a subdirectory. - The avatar has `alt=""`, since the user name is shown next to it. - Cacheability from the avatar file or media item, the image style, and the user, field and media access bubbles up. - The image style is a config dependency. If the style is deleted, the formatter uses the replacement style or, without one, shows the default image, instead of being removed from the display. - New `formatter` library in `tagify_user_list` with `css/tagify_user_list_formatter.css` for the round avatar. - `tagify_user_list` now declares its dependency on the core `image` module, which it already used for avatar image styles. ### Tests - `TagifyEntityReferenceFormatterKernelTest` covering: - default output; - entity ID and info label; - info label turned off; - image info label; - markup sanitization; - token values staying escaped; - formatted text tokens rendering as text; - markup returned by an alter hook, and markup that filters down to nothing; - labels changed to markup or removed by an alter hook, including the cacheability of a field whose tags are all removed; - info label hidden without `view` access, including hooks that read the info label as a string; - info label tokens in the tag's language; - an empty field. - `TagifyUserListEntityReferenceFormatterKernelTest` covering: - the user picture for visitors with "access user profiles"; - the default image without that permission, and for users without a picture; - media avatars, and the default image for unpublished media; - an empty image style; - the formatter only being offered for user references; - the image style dependency and its removal. ## Remaining tasks - [ ] Code review - [ ] Manual testing with Claro, Gin and a front-end theme - [ ] Add screenshots of the formatter output ## User interface changes - A new "Tagify" formatter option appears for entity reference fields under Manage display, with settings for linking, entity ID and info label. Fields that use it display as Tagify-style pills instead of a plain list of labels. - A new "Tagify User List" formatter option appears for user reference fields, with the same settings plus the avatar image field and image style. Fields that use it display each user as a pill with their avatar and name. ## API changes None to existing APIs. New additions: - Field formatter plugins `tagify_entity_reference_formatter` and `tagify_user_list_entity_reference_formatter` - Theme hook `tagify_formatter`, with an optional `avatar` variable for each tag - `TagifyEntityReferenceFormatter::buildTag()` as an extension point for subclasses - Libraries `tagify/formatter`, `tagify/tagify_styles` and `tagify_user_list/formatter` - Test module `tagify_formatter_test`, which implements `hook_tagify_autocomplete_match_alter()` for the kernel tests ## Data model changes - Adds the config schemas `field.formatter.settings.tagify_entity_reference_formatter` and `field.formatter.settings.tagify_user_list_entity_reference_formatter`. No update path is needed. - `tagify_user_list` now depends on `drupal:image`. No update path is added. Sites that use `tagify_user_list` without the image module would need to enable it, but avatar image styles already required it.