Customize the HTML of a link field from a custom theme

Question

I've a Link field named field_home_link, attached to a Content Type named Home, and I'm trying to customize how it is rendered as HTML from inside a custom theme.

Instead of the default generated HTML:

<a tabindex="0" href="http://example.com">Link text</a>

I need to render this HTML, adding custom CSS classes on it:

<a href="http://example.com" class="btn-circle btn-circle--blue js-open-modal">
  Link text
</a>

But I would like to have most flexibility as possible on the rendered HTML, not only adding classes. For example I might need to add other attributes on the tag <a> or maybe also change the tag <a> with something else.

Would be enough having access to the link's properties (url and text) and arrange them in some custom HTML code.

How can I do this?

---

I tried to create a template for the link field:

field--field-home-link.html.twig

but inside this template I don't know how to access link's elements (url and text) and I'm stuck with this:

{% for item in items %}
  <!-- item.content contains the link element -->
  {{ item.content }}
{% endfor %}

Is there no way to do something like this?:

{% for item in items %}
  <a href="{{ item.content.url }}" class="btn-circle btn-circle--blue js-open-modal">
    {{ item.content.text }}
  </a>
{% endfor %}

Answer 1

Try this:

{% for item in items %}
  <a href="{{ item.content['#url'] }}" class="btn-circle btn-circle--blue js-open-modal">
    {{ item.content.text }}
  </a>
{% endfor %}

Found it in a video from 2015, where MortenDK is showing off It's about 25 min. in

DrupalCon Los Angeles 2015: Drupal 8 Theming with Love

Answer 2

Spent 2 days on this similar problem. Sebastian, you almost had it. Twig snippet should look more like this:

{% for item in items %}  
  <a href="{{ item.content['#url'] }}" class="btn-circle btn-circle--blue js-open-modal">
    {{ item.content.['#title'] }}  
  </a>
{% endfor %} 

['#title'] - is really important to place the text in the a href tag

Definitely MortenDK was very helpful: https://www.youtube.com/watch?v=bvaz9eb54c4

Answer 3

If you're using views (as I understood as you mentioned the machine name field_home_link, you can simply hide the link field by ticking the checkbox saying Exclude from display in view.

Below you will see replacement patterns and overwrite option where you can write your snippet-

<a href="http://example.com" class="btn-circle btn-circle--blue js-open-modal">
  Link text
</a>

save your view, it's done.

Answer 4

I have tested for both external and internal URL by using like below, it's working as desired.

<a href="{{ content.field_my_link[0]['#url'] }}" class="button buy-now-btn">{{ content.field_my_link[0]['#title'] }}</a>