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