Navigation Logo der Webseite
Responsive Images — Zusammenspiel mit Hugo

Responsive Images — Zusammenspiel mit Hugo

Veröffentlicht am von in Querbeet

Im ersten Beitrag zu dem Thema (Erstellung) ging es darum, wie man die benötigten Bilder erstellt. Die Dateien haben wir jetzt also — wie bindet man sie nun so ein, dass je nach Brow­ser/­Dis­play­größe/­Band­breite/… das richtige Bild geladen wird? Das ist Thema in diesem zweiten Artikel!

In dem Moment, in dem der Browser eine Bilddatei beim Server anfragt, weiß es (noch) nicht, welche Abmessungen das Bild haben wird. Da die Seite noch nicht vollständig geladen ist, kann er auch maximal raten, wie groß das Bild auf der Seite dargestellt wird. Diese beiden Daten sind jedoch nötig, um das „korrekte“ Bild für die optimale Darstellung beim Besucher zu erreichen. Für den Fall, dass es sich um ein Foto im Hochformat handelt (portrait) wird der figure-Umgebung noch eine entsprechende Klasse mitgegeben und die Größe den entsprechenden Bildwerten angepasst (siehe auch den ersten Artikel, dort wurden die Größen im Skript festgelegt).

Listing 1: Hochformat? Klasse! img-tag mit sizes- und srcset-Attribut je nach Ausrichtung.

Um auch für Text-basierte Browser einen Inhalt als Ersatz für die Bilder anzubieten, muss eine alternative zum Bild bereit gestellt werden.

< {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }}
Listing 2: Setze das alt-Attribut direkt oder nutze die caption, sofern etwas davon verfügbar ist.

Neben der optimierten Darstellung fügt der Shortcode auch noch die notwendigen data-Attribute ein, auf die jsLighbox zugreift.

< data-jslghtbx="/img{{ .Get "src" }}-xlarge.jpg" data-jslghtbx-group="{{ if .Get "group" }}{{ .Get "group" }}{{ else }}g{{ end }}" {{ with .Get "caption" }}data-jslghtbx-caption="{{ .|markdownify }}"{{ end }} />
Listing 3: Abschnitt für jsLightbox.

Sofern man sich ausreichend Mühe gemacht hat und dem Bild neben der Beschreibung noch eine schöne Überschrift (oder besser Unterschrift bei dieser Anzeige?) mitgegeben hat, soll diese auch noch angezeigt werden in einer figcaption.

{{ if .Get "caption" }}
{{ .Get "caption" | markdownify }}
{{ end }}
Listing 4: Einbinden der Überschrift für das Bild.

All dieser Code muss in einer Datei gespeichert werden, nennen wir sie picture.html, und im Verzeichnis themes/NAME/layouts/shortcodes/ abgelegt werden. Anschließend können wir in unseren Artikeln Bilder sehr bequem einbinden:

{{< picture src="/path/to/image/NAME-WITHOUT-EXTENSION" alt="ALTERNATIVE" caption="FIGURE-CAPTION" [portrait="1"] >}}
Listing 5: Beispiel zur Verwendung des Shortcodes

Weitere Infos zur Verwendung von srcset, sizes und evtl. picture gibt es beim kulturbanausen und auch wieder beim smashingmagazine.