Hugo: Shortcode 'zoomimage'

Das tolle an Hugo ist, dass man seine eigenen Parser-Erweiterungen programmieren kann. Im Hugo Universum heißt das shortcode (🖇️ 🔐) . Beim Parsen des Shortcodes wird HTML erzeugt. Hugo liefert von Haus aus viele Shortcodes mit. Darunter zum Beispiel für YouTube, Vimeo, Tweets, Instagram Fotos usw. Um zum Beispiel ein YouTube Video einzubinden, kann ich in meiner Markdown Datei folgenden Code schreiben:

{{< youtube w7Ft2ymGmfc >}}

Der Shortcode heißt youtube und die Video ID ist der Parameter w7Ft2ymGmfc. Beim Parsen wird dann der Shortcode mit allen Parametern in HTML umgewandelt. Im Falle vom YouTube Shortcode wird der YouTube Player generiert.

Shortcode zoomimage

Ich binde häufig Bilder in meine Blogartikel ein. Wenn man auf das Bild klickt, dann soll das Bild in einem neuen Fenster geöffnet werden, sodass man darin zoomen kann.
Das kann man natürlich auch ohne Shortcode lösen, aber dann müsste ich den selben HTML/Markdown Block immer wieder neu schreiben bzw. kopieren. Und wenn ich in Zukunft am HTML was ändern möchte, dann muss ich durch jeden Post einzeln gehen und Änderungen vornehmen.

Mein Shortcode sieht wie folgt aus:

{{< zoomimage src="/images/2018/04/astra_j_opc_ansatzpunkt_unterstellbock.jpg" alt="Astra J OPC Unterstellbock Position vorne" >}}

Aktuell nimmt der Shortcode zwei Parameter:

Die Layout Datei liegt bei mir im Pfad layouts/shortcodes/zoomimage.html und hat folgenden Inhalt:

<a href="{{ .Get "src" | absURL }}" target="_blank">
    <img src="{{ .Get "src" | absURL }}" {{ with .Get "alt"}} alt="{{.}}" {{ end }}/>
</a>

Im Grunde genommen wird bei mir um das img-Tag ein a-Tag gespannt, dass auf das Bild verweist.

Shortcode figure

Hugo hat auch einen eingebauten Shortcode mit dem Namen figure, dass so etwas ähnliches macht wie mein zoomimage. Der Shortcode nimmt eine Bild-URL und verwandelt dies in ein HTML figure-Element. Zusätzlich könnte ich dem Shortcode eine URL angeben, die bei klick auf das Bild geöffnet wird.
Mit hat diese Lösung nicht gefallen, da ich die URL dann doppelt angeben müsste und das figure-Element das Bild verkleinert darstellt.


Du hast einen Kommentar, einen Wunsch oder eine Verbeserung? Schreib mir doch eine E-Mail! Die Infos dazu stehen hier.

🖇️ = Link zu anderer Webseite
🔐 = Webseite nutzt HTTPS (verschlüsselter Transportweg)
Zurück