I am new to Drupal and I love it very much. I am learning it on my own but I am stuck on a problem right now.
I created a custom block that display a title and a list of links. So the only fields in that blocks are of type links. It's a block for my footer region. So when the user clicks, it opens a new website in a new tab.
I want to alter the html output just for this block type, so I took out this theme suggestion: field--block-content--field-links--footer-links.html.twig
My problem is how to add a class to every <a>tag?
I tried using the module 'link class'. It works buggy. It only reads the classes that already exists in the css prior to installing the module. It doesn't read new classes created after installing the module. I tried different things, cleared the cache many times but weird. There has to be a better way to add the classes without a module.
Could anyone help me and show me the best way to add a class to my <a> tags?
Thank you :)
Here's the default template for
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }}>
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
{{ item.content }} -------------> add class here
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes }}>
<div{{ title_attributes }}>{{ label }}</div>
{% if multiple %}
<div>
{% endif %}
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
Answer
Replace {{ item.content }} with hardcoded link:
<a href="{{ item.content['#url']|render }}" {% if item.content['#options']['external'] %} target="_blank" {% endif %} class="some class here">{{ item.content['#title'] }}</a>
Or if you want you can merge the class options:
{{ item.content|merge({'#options': {'attributes': {'class': ['some', 'class', 'here']}}}) }}