Hyperlink Twig - Rel "sponsored" ergänzen

Hallo,

ich möchte dem Hyperlink Element eine "rel=""sponsored" über die Template Auswahl ergänzen.

Ansatz:

HTML-Code:

---

{% extends "@Contao/content_element/hyperlink.html.twig" %}

{#
    Currently available blocks:
    "picture_component", "image", "sources", "source",
    "schema_org", "figure_component", "media",
    "media_link", "caption", "caption_inner",
    "content", "text_link", "image_link",
    "headline_component", "headline_attributes",
    "headline_inner", "wrapper", "wrapper_tag",
    "attributes", "inner", "metadata", "style",
    "script"
#}


{% block attributes %}
    {% set attributes = attrs(attributes|default).addRel('sponsored') %}
    {% set attributes = attrs(attributes|default).addClass('sponsored') %}
    {{ parent() }}
{% endblock %} 

---

addClass funktioniert hier für das Eltern Div (wenn templates/content_element/hyperlink.html.twig genutzt wird.). Gibt es addRel überhaupt? Und wie setze ich das auf den a Tag? text_link_attributes?

Wie mache ich das in templates/content_element/hyperlink/addsponsored.html.twig nutzbar. Denn hier greift die Klasse nicht.

.add('rel', 'sponsored') mal versucht?

.set() wenn dann

HTML-Code:

---

{% block attributes %}
    {% set attributes = attrs(attributes|default).addClass('sponsored') %}
    {% set attributes = attrs(attributes|default).set('rel', 'sponsored') %}
    {{ parent() }}
{% endblock %} 

---

erzeugt:

HTML-Code:

---


<div class="content-hyperlink sponsored" rel="sponsored">
<a href="URL" target="_blank" rel="noreferrer noopener">Linktext</a>
</div>

---

Kommen der Sache also näher. Hätte gerne:

HTML-Code:

---


<div class="content-hyperlink">
<a class="sponsored" href="URL" target="_blank" rel="noreferrer noopener sponsored">Linktext</a>
</div>

---

Wobei die Klasse hier nur dem Tests gilt. Darf auch wegbleiben.

PHP-Code:

---

{# templates/content_element/hyperlink.html.twig #}
{% extends "@Contao/content_element/hyperlink.html.twig" %}

{% set link_attributes = attrs(link_attributes|default).set('rel', 'noreferrer noopener sponsored') %} 


---

PHP-Code:

---

templates/content_element/hyperlink/sponsored.html.twig

{% extends "@Contao/content_element/hyperlink.html.twig" %}
{% set link_attributes = attrs(link_attributes|default).set('rel', 'sponsored') %} 


---

gibt mir so wie ich es möchte:

HTML-Code:

---

<div class="content-hyperlink">
<a href="#" target="_blank" rel="sponsored">Jetzt testen!</a>
</div>

---

überschreibt aber die "noreferrer noopener" bei externem Linkziel.

HTML-Code:

---

<div class="content-hyperlink">
<a href="#" target="_blank" rel="noreferrer noopener">Jetzt testen!</a>
</div>

---

Das wäre mit add ja anders, oder?

Es gibt kein "add" für den Wert einzelner, beliebiger Attribute. Kann es auch nicht geben - außer für class, denn da ist die Syntax ja genau definiert im HTML Standard.

Das müsstest du selbst mergen. zB:

PHP-Code:

---

{# templates/content_element/hyperlink.html.twig #}
{% extends "@Contao/content_element/hyperlink.html.twig" %}

{% set link_attributes = attrs(link_attributes|default)
    .set('rel', (link_attributes|default(attrs()).rel|default ~ ' sponsored')|trim) 
%} 


---

Für die Interessierten: hier der möglicherweise kompliziert aussehende Code für den "rel" Wert runtergebrochen ;)

Man will den Wert "sponsored", also schreibt man

PHP-Code:

---

'sponsored' 


---

Man will den Wert aber an einen möglicherweise bestehenden "rel" Wert anhängen, also schreibt man

PHP-Code:

---

link_attributes.rel ~ ' sponsored' 


---

Damit kein Fehler auftritt, wenn in link_attributes noch gar kein "rel" Wert definiert ist, schreibt man

PHP-Code:

---

link_attributes.rel|default ~ ' sponsored' 


---

Falls kein bestehender "rel" Wert definiert war, würde das nun aber zu einem unnötigen Abstand führen, also rel=" sponsored". Also schreibt man

PHP-Code:

---

(link_attributes.rel|default ~ ' sponsored')|trim 


---

Um Vorzubeugen, dass kein Fehler auftritt, wenn die Variable link_attributes gar nicht existiert, schreibt man

PHP-Code:

---

(link_attributes|default(attrs()).rel|default ~ ' sponsored')|trim 


---

Voilà

Zitat:

---

Zitat von Spooky

.set() wenn dann

---

meinte ich, zu schnell getippt :')