Add class to "link to content" view field

Question

I'm using Drupal 8 and building a view. I have a field, which happens to be a title field, and I have set it to link to content. I would like to know how I can simply add a btn class to the anchor tag. Right now the output looks like this:

<a href="/node/{id}" hreflang="en">... custom text ...</a>

I know I can use the Rewrite Results view feature to accomplish this, however, I need more power than that because I am building a theme for a client. The theme needs to be more generic, so I need to be able to accomplish this in a template. Is there template suggestion/hook that would allow me to override this in a template such as .../templates/views-view-field--link.html.twig? Or is there a theme function that I could use to override the markup by adding the class I would like?

I've considered using the views-view-field.html.twig template and overriding the node_view type to accomplish this, but I'm not sure how to do that whilst keeping the custom text a user could be using because it's really hard to debug the field options.

Edit

I forgot to mention, this needs to rely on Drupal core. I can't expect the user to install any additional modules for it to work.

Answer 1

Along with Wims suggestion, I would suggest (as I usually do) to bypass fields in views, and render the view mode of the entity in question. Usually, this is sufficient in most cases if this is a presentation based view, and not a 'report' style view (where records are in table format and fields serve as cell data).

Then, supply the twig template for view modes, where the title is linked, and you can add the class(es) there. Now when you use that view mode to render in Views, it uses one template and is consistent, and Views that rely on rendering entities become easier to maintain and quicker to setup.

Here is an article that explains the difference and the benefit: https://www.amazeelabs.com/en/blog/views-field-rewriting-to-views-modes

That said, no, links themselves do not have a twig file (where you would see the anchor tag markup). I have seen the |merge option before that Wim linked to, though I have been unsuccessful in getting that to work in 8.2.5.

You could also implement theme_preprocess_field and supply the class to the attributes before it is rendered, though as you can imagine, if you have a lot of these, it'll be some work.

Answer 2

Override just one field

There is a detailed answer in this Q: Overriding views-view-field.html.twig for specific fields.

You can simply use views-view-field--fieldname.html.twig. Use core/modules/views/templates/views-view-field.html.twig as the base template. It also contains information about which variables you can use:

view: The view that the field belongs to.
field: The field handler that can process the input.
row: The raw result of the database query that generated this field.
output: The processed output that will normally be used.

Override all links

Use field--node--field-link.html.twig which you can get from this source. It contains all the information about variables you can use.

Remember

Of course, don't forget to clear your cache after creating the new template or making changes to it.

Answer 3

I need to be able to accomplish this in a template

This needs to rely on Drupal core. I can't expect the user to install any additional modules

Based on these constraints:

OPTION A

create views-view-field--field-name.html.twig

Inside put <div class="btn">{{ output -}}</div>

Then in your CSS file .btn a { .... };

---

But I really need to have the class inside the <a> tag... Ok then:

OPTION B

Inside mytheme.theme

use Drupal\Core\Url;
use Drupal\Core\Link;

function mytheme_preprocess_views_view_field(&$variables) {

  // check if it's the title field and also if "Link to the Content" (from the Views UI) is checked marked. 

  if ($variables['field']->options['field'] == 'title' && $variables['field']->options['settings']['link_to_entity'] == TRUE){
  
    // kint($variables['field']); <-- if you need to use kint
     
    $og_link = $variables['field']->original_value;
     
    // make this into XML so we can grab the href value
  
    $xml_link = new SimpleXMLElement($og_link);
    
    global $base_url;
    
    // problem is that $base_url contains the /drupal folder path (http://example.com/drupal) in url 
    // also the xml_link has it too (/drupal/node/5).
    // Since we only need of them to have it 
    // lets grab some parts of the $base_url by parsing it.
    
    $complete_url = parse_url($base_url);
  
    $complete_url = $complete_url['scheme'] . '://www.' . $complete_url['host'] . $xml_link['href'];

    // Now create a brand new link
    
    $url = Url::fromUri($complete_url);
    $link_options = array(
      'attributes' => array(
        'class' => array(
          'btn',
        ),
      ),
    );
    $url->setOptions($link_options);
    // $xml_link = the title between the <a>title</a> tags
    $link = Link::fromTextAndUrl(t((string)$xml_link), $url )->toString();
    
    // re-writes, sets the output to our link.
    $variables['output'] = $link;
  } 
 
}

Basically, we grab the url of the title and the title text. Then we create a brand new link (the Drupal way) using those values and add the class btn to our link and set the field output to our newly created link.

Result

Answer 4

I've achieved the same result in this way, without doing anything with custom templates or code, only with rewriting of the result:

It is for a commerce product instead of node, but i think that it works with every entity. I think that for the most of cases it should be easiest and without the need for coding and new templates.