Hyperlink Twig - Rel "sponsored" ergänzen

[JMMB]

Hallo,

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

Ansatz:

{% 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.

[zoglo]

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

[Spooky]

.set() wenn dann

[JMMB]

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

erzeugt:

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

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

[Spooky]

{# 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') %} 

[JMMB]

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:

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

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

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

Das wäre mit add ja anders, oder?

[Spooky]

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:

{# 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) 
%} 

[Spooky]

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

'sponsored' 

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

link_attributes.rel ~ ' sponsored' 

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

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

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

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

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

Voilà

[zoglo]

.set() wenn dann

meinte ich, zu schnell getippt :')