×
Startseite RSS-Feed Info
In der Markdown Datei Bilder per Shortcodes aus dem Page Bundle einbinden.

Hugo - Page Bundle Shortcodes für Bilder

Hugo - Page Bundle Shortcodes für Bilder

In diesem Beitrag beschreibe ich wie Bilder des Page Bundle im Front Matter der Markdown Datei deklariert werden. Da mir die Markdown Möglichkeiten der Bildausgabe nicht ausreichen, habe ich zwei Shortcodes mit mehr Möglichkeiten ( Größe, Positionierung, Caption) programmiert.

Der Quellcode der weiter unten beschriebenen Shortcodes kann natürlich optimiert werden. Man könnte die Shortcodes auch in einem Shortcode zusammenfassen. Der Aufbau und die Übergabe an solch einen Shortcode wird dann aber komplexer. Mögliche falsche Übergabeparameter fange ich nicht ab. Für meine Zwecke reicht der Aufbau so wie beschrieben.

In der Hugo Dokumentation - Page Bundles - und - Page Resources - können Sie detaillierte Informationen zu den hier beschriebenen Themen nachlesen.

Page Bundle Struktur

Die Struktur für meine Page Bundles sieht wie folgt aus:

content/
  ├── blog/
        ├── name-of-page-bundle1/
              ├── img/
                  └── image-name1.jpg
                  └── image-name2.jpg
              ├── index.en.md
              └── index.md
        ├── name-of-page-bundle2/
        ├── name-of-page-bundle3/
        ├── _index.en.md
        └── _index.md
  ├── about-me/
        ├── img/
            └── image-name1.jpg
        ├── index.en.md
        └── index.md
..

Für jede Webseite wird ein Page Bundle im Content Verzeichnis angelegt. Jedes Page Bundle besteht aus dem Verzeichnisnamen des Page Bundles, einer Markdown Datei index.md für die Hauptsprache und einem Unterverzeichnis img für die Bilddateien. Meine Blogbeiträge habe ich in dem Verzeichnis content/blog/ gespeichert. Mit der Zeit, bei immer mehr Blogbeiträgen, wird es dadurch für mich übersichtlicher.

Die Page Bundles der allgemeinen Webseiten - Über mich, Datenschutz, Impressum und die Kontaktseite speichere ich direkt im content Verzeichnis.

Der Page Bundle Verzeichnisname kann auch nachträglich verändert werden. Dies hat keinen Einfluss auf die URL-Struktur. Der Verzeichnisname wird nur für die eigene Organisation der Page Bundles genutzt.

Durch die Struktur werden sämtliche Dateien für eine Webseite innerhalb von einem Verzeichnis gespeichert. Es können dort natürlich auch andere Dateitypen, zum Beispiel PDF, gespeichert werden.

Front Matter Angaben der Bilddateien

---

title: "Title web page"
..
resources:
- name: image-name1
  src: img/image1.jpg
- name: image-name2
  src: img/image2.jpg

---

Unterhalb von den normalen Front Matter Bezeichnern wird der Abschnitt resources: angelegt. Die Beschreibung jeder Resource fängt mit einem Bindestrich gefolgt von einem Leerzeichen an. Danach wird der Name der Resource angegeben. Dieser Name wird später an die Shortcodes übergeben.

In der nächsten Zeile wird der Pfad zur Resource Datei in Abhängigkeit zum Page Bundle Verzeichnis angegeben. In meinem Fall also img/image1.jpg. Der Front Matter Bezeichner dafür ist src: gefolgt von einem Leerzeichen und dem Pfad. Das Einrücken von dem resource Bezeichner ist nicht nur optisch übersichtlicher, sondern wird von Hugo mit einem Tab (Tabulator) erwartet. Ansonsten gibt es einen Generierungsfehler.

Es können soviel Resources angegeben werden, wie für diese Webseite gebraucht werden.

Shortcode img100width.html

Dieser Shortcode zeigt ein Bild mit der Breite von 100% an. Die Breite wird bei meinem Theme durch die von mir limitierte Breite des Contentbereichs begrenzt. Wenn bei Ihrem Theme die Contentbreite nicht begrenzt ist, wirkt das Bild wahrscheinlich überdimensioniert.

Innerhalb der Markdown Datei wird der Shortcode wie folgt aufgerufen:

{{< img100width "resource-name" "alt Attribut Inhalt" "Captiontext der unterhalb des Bildes angezeigt werden soll." >}}

Der Shortcodename (ohne .html) wird als erstes angegeben. Parameter 1 ist der Resource Name, Parameter 2 der Inhalt für das alt Attribut, Parameter 3 ist der Captiontext der unterhalb des Bildes angezeigt wird.

Der Sourcecode im Pfad layouts/shortcodes/img100width.html sieht wie folgt aus:

{{ $img := $.Page.Resources.GetMatch (.Get 0) }}
{{ $imgalt := (.Get 1) }}
{{ $imgcaption := (.Get 2) }}
{{ with $img }}
  {{ with $imgcaption }}
  <figure class="box-100">
    <img src="{{- $img.RelPermalink -}}" class="img100width" loading="lazy" alt="{{- $imgalt -}}">
    <div class="img100caption">
      <figcaption>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
          <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
          <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
        </svg>
        {{- $imgcaption -}}
      </figcaption>
    </div>
  </figure>
  {{ else }}
  <img src="{{- $img.RelPermalink -}}" class="img-box100width" alt="{{- $imgalt -}}">
  {{ end }}
{{ end }}

Aus der Sicht des Shortcodes wird der oben beschriebene Resource Name Parameter 1 zu dem Parameter 0. Mit {{ $img := $.Page.Resources.GetMatch (.Get 0) }} wird über den Resourcenamen auf den Resource Bezeichner src: zugegriffen und der Pfad in die Variable $img gespeichert.

Wenn ein Caption für das Bild übergeben wurde {{ with $imgcaption }} wird das HTML-Tag figure gefüllt, ansonsten nur das HTML-Tag img ausgegeben. Damit keine Caption ausgegeben wird, muss der Parameter leer übergeben werden. Das bedeutet "".

Der Rest ist Webdesign. Dem HTML-Tag figure wird die CSS-Klasse box-100 zugewiesen. Dem img mit Caption die CSS-Klasse img100width, ohne Caption img-box100width. Die figcaption wird in ein div mit der CSS-Klasse img100caption integriert. Dadurch kann dieser Teil besser gestaltet werden.

In der figcaption wird vor dem Captiontext ein Kamerasymbol als SVG angezeigt. Wie man an die kryptischen, alphanumerische SVG Angaben kommt und in Hugo einsetzt habe ich in meinem Blogbeitrag - Kostenlose Bootstrap SVG-Icons in Hugo benutzen - beschrieben. In dem Blogbeitrag habe ich mehrere Aufruf-Methoden - leider bleibt einem manchmal nichts anderes übrig - beschrieben. Für die figcaption im Shortcode img100width.html reicht das Kopieren “Copy HTML” über die - Zwischenablage - aus.

SCSS für Shortcode img100width.html

// Shortcode img100width
// Image with caption
.box-100 {
  margin: 2.0rem 0;
  border: 1px solid lightgrey;

  .img100width {
    width: 100%;
  }
  .img100caption {
    padding: 0.7rem;
    font-size: 0.8rem;
    border-top: 1px solid lightgrey;
    color: var(--wk-color-2);
    background-color: ghostwhite;
  }
}
// Image without caption
.img-box100width {
  width: 100%;
  margin: 2.0rem 0;
  border: 1px solid lightgrey;
}
// Responsive
@media (max-width: 575.8px) {
  .img100caption {
    display: none;
  }
}
// End - Shortcode img100width

Der SCSS-Code ist eigentlich selbsterklärend. Es gibt aber zwei Besonderheiten.

In der CSS-Klasse .img100caption weise ich color: den Wert einer Variablen var(–wk-color-2); zu. Der Inhalt der Variablen ist #222222. Der Grund für die Zuweisung per Variablen ist der Darkmode meines Themes. Standardmäßig startet das Theme im Lightmode. Durch ein Theme Switcher Symbol - ganz oben, das Zweite von rechts - kann in den Dunkelmodus umgeschaltet werden. Zum Zeitpunkt der Entwicklung dieser Funktion wusste ich noch nicht, dass ich dieselbe Farbe für beide Varianten benutzen werde. Die Variable ist deshalb an dieser Stelle überflüssig.

Bei einer Bildschirmbreite von bis zu 575.8px wird die Caption mit display: none; ausgeschaltet. Das Verhältnis der Caption zum Bild passt dann einfach nicht mehr.

Beispiel für Shortcode img100width.html

{{< img100width "segeberger-sea" "Segeberger Sea" "Displaying an image with the shortcode img100width.html" >}}

Segeberger Sea
Displaying an image with the shortcode img100width.html

Shortcode imgRight.html

Segeberger Sea
40% image with imgRight.html

Mit diesem Shortcode wird das übergebene Bild auf der rechten Seite positioniert. Der Text umfließt das Bild. Vorgesehen ist zurzeit eine Bildbreite von 25% bzw. 40%. Wenn Sie andere Prozentbreiten implementieren möchten, kann dies im SCSS problemlos umgesetzt werden. Die Länge des Captiontext sollte der Bildbreite angepasst werden.
Der Aufruf des Shortcode im Markup sieht wie folgt aus: {{< imgRight "segeberger-sea" "40" "Segeberger Sea" "40% image with imgRight.html" >}}

Als Parameter 2 wird die %-Größe übergeben, alle anderen Parameter verschieben sich dadurch zum Ende hin. Der Sourcecode im Pfad layouts/shortcodes/imgRight.html sieht wie folgt aus:

{{ $img := $.Page.Resources.GetMatch (.Get 0) }}
{{ $imgproz := (.Get 1) }}
{{ $imgalt := (.Get 2) }}
{{ $imgcaption := (.Get 3) }}
{{ with $img }}
  {{ with $imgcaption }}
  <figure class="box-right-{{ $imgproz }}">
    <img src="{{- $img.RelPermalink -}}" class="img-right-{{ $imgproz }}" loading="lazy" alt="{{- $imgalt -}}">
    <div class="img-right-{{ $imgproz }}-caption">
      <figcaption>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
        <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
        <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
        </svg>
        {{- $imgcaption -}}
      </figcaption>
    </div>
  </figure>
  {{ else }}
    <img src="{{- $img.RelPermalink -}}" class="image-right-{{ $imgproz }}" alt="{{- $imgalt -}}">
  {{ end }}
{{ end }}

Der Sourcecode ist bis auf die %-Breite identisch mit dem vorhergehenden Shortcode. Der Unterschied liegt in der Zuweisung der CSS-Klassennamen. Diese werden durch die %-Breite ergänzt.

SCSS für Shortcode imgRight.html

// Shortcode imgRight -----
.box-right-25,
.box-right-40 {
  display: block;
  float: right;
  margin: 0.3rem 0 0 1.6rem;
  border: 1px solid lightgrey;

  img {
    width: 100%;
  }
  .img-right-25-caption,
  .img-right-40-caption {
    padding: 0.7rem;
    font-size: 0.8rem;
    border-top: 1px solid lightgrey;
    color: var(--wk-color-2);
    background-color: ghostwhite;
  }
}
.box-right-25 {
  width: 25%;
}
.box-right-40 {
  width: 40%;
}
// Responsive
@media (max-width: 575.8px) {
  .img-right-25-caption,
  .img-right-40-caption {
    display: none;
  }
}
@media (max-width: 375.8px) {
  .box-right-25,
  .box-right-40 {
    float: unset;
    width: 100%;
    margin: 1.0rem 0 1.0rem;
  }
}
// End - Shortcode imgRight -----

Abweichend von dem SCSS-Code des anderen Shortcodes ist die float: right; Anweisung. Mit der das Bild auf der rechten Seite positioniert wird.

Die CSS-Klassennamen für 25% und 40% sind selbsterklärend. Einige Anweisungen werden zusammengefasst. Auch hier wird die Caption bis zu einer Bildschirmbreite von 575.8px ausgeschaltet. Bei Bildschirmen mit einer maximalen Breite von 375.8px wird das Bild mit einer Breite von 100% angezeigt.

Überprüfen des responsive Viewport

Damit Sie solche responsive Bildschirmbreiten überprüfen können stellt jeder Browser entsprechende Entwicklertools zur Verfügung. Mit Google Chrome können Sie diese über die Menüpunkte Anzeigen | Entwickler | Entwicklertools aufrufen oder mit der rechten Maustaste die Kontextauswahl aufrufen und auf “Untersuchen” klicken. Das Fenster mit der Webseite können Sie in der Breite auf der rechten Seite verändern.

Google Chrome Development Environment
Google Chrome Entwicklungsumgebung - Testen des responsive Viewports.

Fazit

Mit den oben beschriebenen Shortcodes sollten Sie schnell und einfach zu ansprechenden Ergebnissen innerhalb Ihres Markdown Textes kommen. Page Bundles bündeln ohne doppelte Strukturen alle Dateien zu einer Webseite.

Linkliste zu diesem Beitrag

Das könnte Sie auch interessieren

|
9 Minuten Lesezeit
0
Dieser Beitrag wurde mit der Hugo-Version 0.115.2 erstellt.

Kommentare werden bei deutscher Spracheinstellung nicht in der englischen Variante der Webseite angezeigt und umgekehrt.

© 2023 - Frank Kunert  -  Ich über mich