How do I customize the flag/unflag links? [duplicate]

Question

I'm fairly new to Drupal theming, and I am trying to customize the HTML output the Flag module for Drupal 8 produces for flag/unflag links; more specifically, I would like to make the links appear as buttons using Bootstrap classes. Does anyone know a good way to do this? I'm placing the flag link on the user profile page to enable users to follow other users. Here are some approaches which I have tried, so far without success:

• Using the Twig replace filter to modify the output. This does not work, apparently because a "lazy builder" is used, delaying the production of the actual HTML output until a later stage after Twig's rendering is already complete.

• Overriding the flag.tpl.php template with a customized version. This has no effect; maybe this functionality is no longer active in Drupal 8 (which did away with PHP templates in general)?

• Using flag_create_link in a theme preprocess function. I got an error that this function does not exist; maybe it no longer exists in the Drupal 8 version of the module? (or else maybe I'm missing a necessary import).

Answer 1

This works in D7, but I am sure it transfers to D8.

One approach is to use Views

1. Under Advanced, RELANTIONSHIP add a relationship of flag, in order to get access to the flag link field.

2. In FIELDS, add flag link field, and under Style Settings >> Checkmark customize field HTML >> Select DIV >> type your bootstrap class name.

In your theme's css file add this, ex:

.ddd .flag-action { border: solid green; }
.ddd .flag.unflag-action { border: solid red;  }

Answer 2

Here is a solution that ended up working for me. In my MYTHEME.theme file, I put the following:

function MYTHEME_preprocess_user(&$vars){
  $f = \Drupal::service('flag.link_builder');
  $link = $f->build('user',$vars['user']->id(),'followed');
  $link['link']['#attributes']['class'][]="btn";
  $vars['follow_link'] = $link;
}

Then, in the user.html.twig template, I put {{ follow_link }} in the appropriate place. It's not a perfect solution, though, because it is not compatible with AJAX links (in which case the button styling is lost after the button is clicked). But with normal links, it works.

Answer 3

From what I could discover, the flag links are just link render elements, which can be modified by hook_link_alter().

The following code is not actually tested, (and may break in the future)

function MYMODULE_link_alter(&$variables) {
  if (strpos($variables['options']['attributes']['id'], 'flag-') === 0) {
    $variables['options']['attributes']['class'] += [
      'new-class',
    ];
  }
}

---

I hope that there is a better approach possible, but they only other alternative I could find was swapping out the flag.link_builder service to apply your desired classes instead of relying on the alter hook.