feat: add new-tab links and removable media previews (1.7.3)

templates/blocks/block.html.twig

@@ -24,7 +24,7 @@
         <p id="{{ block.id }}" class="block-text{{ designClasses }}">{{ props.text }}</p>
     {% endif %}
 {% elseif type == 'button' %}
-    <a id="{{ block.id }}" class="button{{ designClasses }}" href="{{ props.href }}">{{ props.text }} <span aria-hidden="true">↗</span></a>
+    <a id="{{ block.id }}" class="button{{ designClasses }}" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.text }} <span aria-hidden="true">↗</span></a>
 {% elseif type == 'image' %}
     {# Wie breit das Bild tatsaechlich erscheint. Steht im Block eine feste Breite - ein Logo mit
        190px, ein Symbol mit 72px -, dann ist das die Antwort, und der Browser laedt die kleine
@@ -38,19 +38,20 @@
     {% set annahme = '(max-width: 650px) 100vw, (max-width: 1024px) 50vw, 800px' %}
     {% set imageSizes = festeBreite ends with 'px' ? festeBreite : (eager or inHeader|default(false) ? annahme : 'auto, ' ~ annahme) %}
     {% set klick = props.click|default(props.href|default('') ? 'link' : 'keine') %}
+    {% set imageLinked = klick == 'link' and props.href|default('') %}
     {% set grossesBild = props.sources|default([]) ? props.sources|last.src : props.src %}
     <figure id="{{ block.id }}" class="block-image{{ designClasses }}">
     {%- if klick == 'vergroessern' -%}
         {# Ohne Skript öffnet dieser Verweis schlicht das große Bild. Mit Skript fängt der
            Betrachter den Klick ab - die Seite bleibt also in jedem Fall benutzbar. #}
         <a class="image-link image-zoom" href="{{ grossesBild }}" data-zoom data-caption="{{ props.caption|default('') }}" aria-label="{{ props.alt|default('Bild') }} vergrößern">
-    {%- elseif props.href|default('') -%}
-        <a class="image-link" href="{{ props.href }}">
-    {%- endif -%}<img src="{{ props.src }}" alt="{{ props.alt }}" width="{{ props.width }}" height="{{ props.height }}" loading="{{ eager or inHeader|default(false) ? 'eager' : 'lazy' }}"{{ eager ? ' fetchpriority="high"' : '' }} decoding="async"{% if props.sources|default([]) %} srcset="{% for source in props.sources %}{{ source.src }} {{ source.width }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="{{ imageSizes }}"{% endif %}>{% if klick == 'vergroessern' or props.href|default('') %}</a>{% endif %}{% if props.caption|default('') %}<figcaption>{{ props.caption }}</figcaption>{% endif %}</figure>
+    {%- elseif imageLinked -%}
+        <a class="image-link" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>
+    {%- endif -%}<img src="{{ props.src }}" alt="{{ props.alt }}" width="{{ props.width }}" height="{{ props.height }}" loading="{{ eager or inHeader|default(false) ? 'eager' : 'lazy' }}"{{ eager ? ' fetchpriority="high"' : '' }} decoding="async"{% if props.sources|default([]) %} srcset="{% for source in props.sources %}{{ source.src }} {{ source.width }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="{{ imageSizes }}"{% endif %}>{% if klick == 'vergroessern' or imageLinked %}</a>{% endif %}{% if props.caption|default('') %}<figcaption>{{ props.caption }}</figcaption>{% endif %}</figure>
 {% elseif type == 'iconcard' %}
     <div id="{{ block.id }}" class="block-iconcard{{ designClasses }}">
         {% include 'blocks/icon.html.twig' with {name: props.icon} only %}
-        <h3>{% if props.href|default('') %}<a href="{{ props.href }}">{{ props.title }}</a>{% else %}{{ props.title }}{% endif %}</h3>
+        <h3>{% if props.href|default('') %}<a href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.title }}</a>{% else %}{{ props.title }}{% endif %}</h3>
         {% if props.text|default('') %}<p>{{ props.text }}</p>{% endif %}
     </div>
 {% elseif type == 'stat' %}
@@ -73,7 +74,7 @@
             <h2>{{ props.title }}</h2>
             {% if props.text|default('') %}<p>{{ props.text }}</p>{% endif %}
         </div>
-        <a class="button" href="{{ props.href }}">{{ props.buttonText }}</a>
+        <a class="button" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.buttonText }}</a>
     </div>
 {% elseif type == 'contact' %}
     <address id="{{ block.id }}" class="block-contact{{ designClasses }}">
@@ -160,7 +161,7 @@
        something carries its label as text for screen readers. #}
     {% set iconBody %}{% include 'blocks/icon.html.twig' with {name: props.icon} only %}{% if not props.decorative %}<span class="visually-hidden">{{ props.label }}</span>{% endif %}{% endset %}
     {% if props.href|default('') %}
-    <a id="{{ block.id }}" class="block-icon icon-size-{{ props.size }}{{ designClasses }}" href="{{ props.href }}"{{ props.decorative ? ' aria-hidden="true" tabindex="-1"' : '' }}>{{ iconBody }}</a>
+    <a id="{{ block.id }}" class="block-icon icon-size-{{ props.size }}{{ designClasses }}" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}{{ props.decorative ? ' aria-hidden="true" tabindex="-1"' : '' }}>{{ iconBody }}</a>
     {% else %}
     <span id="{{ block.id }}" class="block-icon icon-size-{{ props.size }}{{ designClasses }}"{{ props.decorative ? ' aria-hidden="true"' : '' }}>{{ iconBody }}</span>
     {% endif %}

templates/blocks/link-attributes.html.twig

@@ -0,0 +1 @@
+{% if newTab|default(false) %} target="_blank" rel="noopener"{% endif -%}