Das Theme “hugo-theme-bootstrap”, das ich hier im Blog verwende, wurde wieder verbessert.

Der Entwickler hat implementiert, dass Hugo beim Rendern der Website automatisch die für die Liste der Blogbeiträge (z. B. /posts) benötigten Thumbnails aus der eingestellten Bilddatei generiert:

  • 180 Pixel Breite für die normale Ansicht.
  • 500 Pixel Breite für die mobile Ansicht.

Beide Dateien werden im HTML-Quelltext als “src set” angegeben und der Browser lädt automatisch das für die Größe passende Bild herunter.

Früher umständlich

Bisher wurde immer das Originalbild in der Originalauflölsung verwendet und nur verkleinert dargestellt. Gerade bei geringer Bandbreite von Besuchern konnte das ein Problem werden, wenn das Originalbild groß war.

So musste man sich bisher selbst darum kümmern, das Artikelbild in entsprechend passender Auflösung bereit zu stellen. Und da das selbe Bild für beide oben genannten Darstellungen verwendet wurde, musste das Artikelbild demnach immer mindestens 500 Pixel breit sein, damit es gut aussah.

Jetzt kann man als Artikelbild ein beliebig großes Bild einstellen und Hugo kümmert sich selbst darum. Nur kleiner als 500 Pixel sollte ein Artikelbild nicht werden, da Hugo das dann einfach nach oben skaliert. Das Ergebnis sieht meist nicht gut aus.

Passt :)

Man kann sich das direkt in diesem Beitrag hier ansehen. Als Artikelbild habe ich die Datei cover.jpg einstellt, die 1,7 MiB groß ist. Die Varianten für normale Ansicht und mobile Ansicht sind passend generiert worden.

Mehr Informationen zu Artikelbildern in diesem Theme gibt es in einem anderen Blogbeitrag, siehe hier.