Hauptstraße Bildverarbeitung

Spezifika der Hugo-Bilder in Mainroad, Typen und Größen

Inhaltsverzeichnis

Mainroad ist ein Theme für den Hugo statischen Seiten-Generator und hat neben einem guten Aussehen eine sehr schlechte Bildverarbeitung

Wie Sie sehen, verwendet diese Seite denselben Ansatz: Text in Markdown schreiben, Bilder hinzufügen und dann mit Hugo eine schöne Sammlung von HTML-, JS- und CSS-Dateien erzeugen.

topimage

Wo

Vorschaubilder werden im Frontmatter der Seite definiert

thumbnail: img/thumb.jpg

Die Sichtbarkeit der Vorschaubilder wird in der config.toml konfiguriert

[Params.thumbnail]
  visibility = ["list", "post"]

Es gibt einige Schwierigkeiten mit Mainroad

  • Mainroad sucht nach Vorschaubildern im Ordner /static, nicht im Page Bundle.
  • Standardmäßig wird ein Bild sowohl für das Vorschaubild auf der Listenseite als auch für das Hauptbild auf der Detailseite verwendet.
  • Vorschaubilder werden nicht skaliert, sondern einfach in den Ordner public kopiert.

Unangenehme Folgen…

  • Dies führt zu einer sehr ineffizienten Bandbreitennutzung, wenn das Bild der Detailseite als Vorschaubild verwendet wird.
  • Es ist sehr unpraktisch (für mich), Bilder im static-Ordner zu speichern, selbst wenn sie in einem parallelen Posts-Baumstruktur-Ordner und nicht im Page Bundle gespeichert werden.

Bildtypen und Größen

Vorschaubilder

  • klein (Mobile Ansicht) 73x53
  • mittel (Desktop Ansicht) 235x171

Detailseite – intern

  • max Desktop 678x495
  • iPad Pro 597x436
  • iPhone XR 374x273
  • iPhone 14 Max 390x285
  • iPad Mini 479x350

Die Lösung

Ist, folgendes zu tun:

  • im static-Ordner – Vorschaubilder für mittel (Desktop Ansicht) 235x171 speichern
  • eine vordefinierte Menge an Vorschaubildern haben – z. B. 10 dieser Bilder und die passendste verwenden oder rotieren
  • im Page Bundle – Desktopbilder 678x495 speichern
  • im Text der Seite sie verweisen ![img](localimg.png)
  • die Sichtbarkeit der Vorschaubilder konfigurieren = [“list”]