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

 1
 2<figure {{ with .Get "portrait"}}class="portrait"{{ end }}>
 3	<img {{ if (.Get "portrait") }}
 4		 sizes="(max-width: 37em) 75vw,
 5				(max-width: 49em) 60vw,
 6				50vw"
 7		 srcset="/img{{ .Get "src" }}-small.jpg 265w,
 8				 /img{{ .Get "src" }}-medium.jpg 530w,
 9				 /img{{ .Get "src" }}-large.jpg 795w,
10				 /img{{ .Get "src" }}-xlarge.jpg 1325w"
11		 src="/img{{ .Get "src" }}-small.jpg"
12		{{else}}sizes="100vw"
13		 srcset="/img{{ .Get "src" }}-small.jpg 400w,
14				 /img{{ .Get "src" }}-medium.jpg 800w,
15				 /img{{ .Get "src" }}-large.jpg 1200w,
16				 /img{{ .Get "src" }}-xlarge.jpg 2000w"
17		 src="/img{{ .Get "src" }}-small.jpg"{{ end }}
18

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

17
18<		 {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }}
19

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

18
19<		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 }} />
20

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.

19
20	{{ if .Get "caption" }}
21	<figcaption>
22		{{ .Get "caption" | markdownify }}
23	</figcaption>
24	{{ end }}
25</figure>
26

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:

1
2{{< picture src="/path/to/image/NAME-WITHOUT-EXTENSION" alt="ALTERNATIVE" caption="FIGURE-CAPTION" [portrait="1"] >}}
3

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