3

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 %}
2

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

1

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.

  • Thank you for the answer, but I'm not using views.. I created a Content Type and just added a new field of type Link with internal name field_home_link. – Andrea Apr 23 '16 at 14:29
  • Sorry, do you use display suite (drupal/projects/ds)? – innocent rock Apr 23 '16 at 18:21
  • No, I don't use Display Suite.. Do you think it can be useful for my question? – Andrea Apr 23 '16 at 20:17
  • Can you install link module, go to field settings of your field and update me whether you see a custom classes option? – innocent rock Apr 24 '16 at 8:46
  • DS helps with classes and manage how to display your fields with custom classes. – innocent rock Apr 24 '16 at 8:48
1

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>
1

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']- this is really important to place the text in the a href tag #}  

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.