Download-Element: Vorschaubild auf verlinkte Datei verlinken

[Inselaffe]

Hallo zusammen, in Contao 4 konnte ich ein Download-Element anlegen, damit eine PDF zum Download bereitstellen und das Vorschau-Bild mittels der Option „Großansicht/Neues Fenster” auf die PDF verlinken – perfekt!

In Contao 5 dagegen wird bei der gleichen Vorgehensweise das Vorschaubild selbst (PNG) verlinkt.

Ein paar Tage her fragte ich ChatGPT (sorry!), aber er vertraute sich nicht zu sagen, der wisse nicht. Wir probierten um die 20 Template-Bearbeitungen aus, ohne Erfolg. Meist wurde das Bild nicht verlinkt, verschwand komplett oder die Anpassungen lösten Fehler im Frontend aus.

Hatte dafür bereits ein eigenes Template download.html.twig angelegt, damit das Download sich mit target=”=blank” öffnet.

Hoffentlich für Fachkundige eine einfache Sache. Vielen Dank im Voraus.

[Spooky]

Wenn das in Contao 4.13 so funktioniert hat und in Contao 5.3 nicht mehr und du das jeweils in frischen Contao Installationen so reproduzieren kannst, dann solltest du dafür ein Issue auf GitHub anlegen.

[Inselaffe]

Mache ich!

Diese ist eine neue Installation. (Werde beim baldigen Update des anderen Projekts die gleiche Problematik haben, es sei denn das vorher gelöst wird.)

Vielen Dank für die schnelle Rückmeldung!

[zonky]

und das Vorschau-Bild mittels der Option „Großansicht/Neues Fenster” auf die PDF verlinken – perfekt!

der Quelltext aus 4.13 suggeriert was anderes https://github.com/contao/contao/blo...oads.html5#L10

in 5.3 hat sich da nichts geändert https://github.com/contao/contao/blo...oads.html5#L10

ggf. war es doch eine individuelle Anpassung?

[Spooky]

der Quelltext aus 4.13 suggeriert was anderes https://github.com/contao/contao/blo...oads.html5#L10

Aus dieser Zeile lässt sich nicht ablesen, welcher Link hinterlegt ist.

[zonky]

stimmt - in image gibts ja auch noch ein a-Tag https://github.com/contao/contao/blo...ge/image.html5

[Bennie]

Ich habe das eben mal ausprobiert
in einer 4.13.55 ist es bei mir so dass das Setzen des Hakens (Großansicht/Neues Fenster) auch die Lightbox öffnet - sprich das Vorschaubild in der Lightbox -
Lasse ich den Haken weg wird beim Klick auf das Bild das PDF geöffnet.

Der Text :

Großansicht/Neues Fenster
Großansicht des Bildes in einer Lightbox bzw. den Link in einem neuen Browserfenster öffnen.

ist da etwas verwirrend weil der Link eben nicht in einem neuen Browserfenster geöffnet wird - dazu hatte ich mir mal extra ein Template mit target=_blank angelegt.

In einer 5.3.40 ist es allerdings anders
Setze ich den Haken Großansicht/Neues Fenster dann öffnet sich das Vorschaubild (png) in der Lightbox.

Lasse ich dort den Haken weg, kann ich das Bild aber nicht mehr anklicken sondern nur noch den TextLink zum PDF, welches dann öffnet.

So ganz verstehe ich dieses Verhalten auch nicht - zumindest würde ich auch etwas anderes erwarten bei ... bzw. den Link in einem neuen Browserfenster öffnen...

Just my 2 cents

[Spooky]

ist da etwas verwirrend weil der Link eben nicht in einem neuen Browserfenster geöffnet wird - dazu hatte ich mir mal extra ein Template mit target=_blank angelegt.

Das brauchst du nicht, dafür gibt es (in Contao 4.13) bereits eine Einstellung.

[Bennie]

Das brauchst du nicht, dafür gibt es (in Contao 4.13) bereits eine Einstellung.

Anscheinend nicht - wenn der Haken gesetzt ist wird kein neues Fenster geöffnet - oder was meinst du?

[Spooky]

oder was meinst du?

Sorry, never mind, da hatte ich selbst eine Anpassung.

[Bennie]

Ah ok, wie gesagt es ist nicht ganz eindeutig - die Formulierung ist beim Text oder Bild-Element auch richtig aber hier ist das Verhalten anders

[Spooky]

aber hier ist das Verhalten anders

In wie fern?

[Bennie]

In wie fern?

Es wird kein Link in einem neuen Fenster geöffnet - wie sollte auch, die Checkbox kommt doch erst nachdem ich den Haken beim Vorschaubild gesetzt habe und dann kann doch nur die Lightbox geöffnet werden oder wie sonst sollte man wählen können ( neues Fenster oder Lightbox?)

[Spooky]

Ja, das ist ja analog zu den anderen Inhaltselementen.

[Bennie]

Jedenfalls ist das Verhalten in 4.13 anders (besser?) als in 5.3 wie der Threadersteller richtig festgestellt hat.

Vielleicht testet es ja noch jemand und kanns bestätigen ?

[Inselaffe]

Wow, viel los hier zwischendurch.

Jedenfalls ist das Verhalten in 4.13 anders (besser?) als in 5.3 wie der Threadersteller richtig festgestellt hat.

Danke für die Bestätigung, und dass du es prüftest. In der Tat etwas verwirrend

[Spooky]

Jedenfalls ist das Verhalten in 4.13 anders (besser?) als in 5.3 wie der Threadersteller richtig festgestellt hat.

Wenn Großansicht/Neues Fenster aktiviert ist, ist das Verhalten gleich. Wenn das nicht aktiviert ist, dann unterscheidet sich das Verhalten zwischen 4.13 und 5. In 4.13 wird das Bild mit der Datei verlinkt, in Contao 5 gar nicht.

[Inselaffe]

Das Verhalten aus 4.13 gefällt mir besser (auch aus UX-Sicht).

Also danke Spooky, dass du das Issue in die Milestones geschoben hast.

Weiß jemand zufälligerweise, wie ich das Verhalten in Contao 5.3 verwirkliche?

Über Twig weiß ich so gut wie nichts. Ja, das wird sich ändern (müssen). Aber ich bin eher jemand, der Websites entwickelt, als Entwickler, zumindest im Moment.

In meiner download.html.twig konnte ich den Textlink in einem neuen Tab öffnen:

{# make file open in a new tab #}
{% block download_link_attributes %}
    {{ download_link_attributes.set('target', '_blank') }}
{% endblock %}

Die PDF zu verlinken kriege ich nicht hin (Stundenlang versucht).

Vielen Dank im Voraus, falls jemand helfen kann.

[Spooky]

Das Verhalten aus 4.13 gefällt mir besser (auch aus UX-Sicht).

Welches Verhalten genau meinst du jetzt?

Das was im GitHub Issue besprochen wurde, wird ja behoben.

[zoglo]

Aber ich bin eher jemand, der Websites entwickelt, als Entwickler, zumindest im Moment.

Twig ist für Leute die Websites entwickeln und Frontend machen, wie du. Twig ist nicht nur für (Hardcore-Backend-Contao-Extension-)Entwickler.

Und was genau hast du vor, welches Verhalten?

[Inselaffe]

Welches Verhalten genau meinst du jetzt?

Das was im GitHub Issue besprochen wurde, wird ja behoben.

Ich meinte: Websitebesuchende sehen einen Downloadlink und ein Bild > klicken wohl aufs Bild > erwarten ein Download.

Ich weiß, das Issue wird behoben. Dachte nur, ich versuche es zwischenzeitlich im Template zu lösen, da dieses Projekt die Tage online geht.

Aber notfalls entferne ich vorerst das Vorschaubild.

[Inselaffe]

Twig ist für Leute die Websites entwickeln und Frontend machen, wie du. Twig ist nicht nur für (Hardcore-Backend-Contao-Extension-)Entwickler.

Steht auf dem Plan. Und wenn ich mich darin erinnere, befinden sich online Vorträge darüber von der Userin mlweb. Also irgendwann kriege ich es hin. Die Vorteile sind mir klar, nur die Einzelheiten noch nicht

[Spooky]

Dachte nur, ich versuche es zwischenzeitlich im Template zu lösen, da dieses Projekt die Tage online geht.

Ich bin mir nicht sicher ob das rein über Twig möglich ist. Das Figure Objekt kann man dahingehend nicht ändern.

[Inselaffe]

Ich bin mir nicht sicher ob das rein über Twig möglich ist. Das Figure Objekt kann man dahingehend nicht ändern.

Ah, das würde einiges erklären.

Danke für deine/eure Hilfe. Ich warte brav auf ein Contao-Update.

[sigmar]

Was mir in solchen Fällen schon aus der Patsche geholfen hat, ist eine CSS-Helperklasse.
Je nach Kontext etwas hackig aber hilfreich, wenn man nicht immer das ganze Markup mit a-Tags wrappen möchte, Beispielsweise wegen Screenreadern. Oder als Hotfix, der sich leicht wieder entfernen lässt.

Nachteil: Text lässt sich nicht mehr ohne weiteres markieren.

Dabei muss das Bild nicht separat verlinkt oder im gleichen a-Tag ausgegeben werden, sondern es wird ein Teil vom a-Tag (bzw. das Pseudoelement darin) über das Elternelement gespannt.

Demo auf Codepen

HTML

<ul>
	...
	<li class="cover">
		<img src="example.jpg" alt="" width="640" height="425">
		<a href="#" class="cover__item">Excepturi, voluptatum.</a>
	</li>
	...
</ul>

CSS

:where(.cover) {
	position: relative;
}

:where(.cover__item)::after,
:where(.cover__item-before)::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

Twig

{% extends "@Contao/content_element/downloads.html.twig" %}
{% use "@Contao/component/_download.html.twig" %}

{% set download_link_attributes = attrs(download_link_attributes|default).addClass('cover__item') %}

{% block list_item_attributes %}{{ attrs(parent()|default).addClass('cover') }}{% endblock %}