Custom Icon and Class Selection

Created on 8 February 2024, 5 months ago
Updated 14 February 2024, 5 months ago

Problem/Motivation

I have added two custom attributes to my LinkIt Fields using this module. However now I'm trying to get them to render the way I'd like.

The first attribute I added was for an icon (selected via a dropdown list). I'd like to either insert a specific SVG based on the attribute selected OR add a class to the link based on the attribute selected.

The second attribute is for button style (selected via another dropdown list) that I'd like to apply a class to the link along with any other optional classes added via the classes field.

What is the best approach to do this? Do I need to create my own Link Field Formatter? Do I do it through a preprocess hook on the field?

The link currently renders as such:

<a href="/services/itsm" icon="chevron-right" button="outline-white-button">Get Help Now</a>

But I'm looking for either:

<a href="/services/itsm" class="outline-white-button">Get Help Now <img src="/sites/default/files/media-libraries/icons/chevron-right-solid.svg" /></a>
<a href="/services/itsm" class="outline-white-button icon--chevron-right">Get Help Now</a>

I don't see the attributes when I dump the vars from a field pre-process hook

  function sbu_spirit_preprocess_field__field_links(&$variables) {
    dpm($variables);
  }

I've reviewed this documentation: https://www.drupal.org/docs/contributed-modules/link-attributes/adding-c... β†’ which is how I got the custom attributes created, but the examples for twig and accessing via php are discussing a different context (I think).

TIA

πŸ’¬ Support request
Status

Needs review

Version

2.1

Component

Documentation

Created by

πŸ‡ΊπŸ‡ΈUnited States sbubaron

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @sbubaron
  • Status changed to Needs review 5 months ago
  • πŸ‡¦πŸ‡ΊAustralia larowlan πŸ‡¦πŸ‡ΊπŸ.au GMT+10

    You will most likely need a custom formatter that extends from LinkFormatter

    In the :viewElements method you have access to $url - and on that $url->getOption('attributes') will be the attributes, you can adapt them there and then call setOption

    Something like this:

    
    namespace Drupal\YOURMODULE\Plugin\Field\FieldFormatter;
    
    use Drupal\Core\Field\FieldItemListInterface;
    use Drupal\Core\Render\Element;
    use Drupal\link\Plugin\Field\FieldFormatter\LinkFormatter;
    
    /**
     * Plugin implementation of custom icon formatter.
     *
     * @FieldFormatter(
     *   id = "MY_MODULE_link",
     *   label = @Translation("Link w/ icon support"),
     *   field_types = {
     *     "link"
     *   }
     * )
     */
    class LinkIconFormatter extends LinkClassFormatter {
    
      /**
       * {@inheritdoc}
       */
      public function viewElements(FieldItemListInterface $items, $langcode) {
        $build = parent::viewElements($items, $langcode);
        foreach (Element::children($build) as $delta) {
          if (!empty($build[$delta]['#options']['attributes']['icon'])) {
            // Modify $build[$delta] here.
          }
        }
        return $build;
      }
    
    }
    
    
    
Production build 0.69.0 2024