Twitter Cards, Open Graph und Artikelbilder im Hugo-Theme hugo-theme-bootstrap

Es gibt Neuerungen im Theme hugo-theme-bootstrap, das hier im Blog verwendet wird. Könnte interessant sein für Menschen, die das Theme auch verwenden.

Artikelbilder

Vor dem Update

Bisher wurde als Beitragsbild das erste Bild in der Liste der Bilder der Variable images: im Front Matter verwendet:

images:
  - relativer-pfad/bild.jpg

# Ergebnis: /blogbeitrag-titel/relativer-pfad/bild.jpg

Oder:

images:
  - /absoluter-pfad/bild.jpg

# Ergebnis: /absoluter-pfad/bild.jpg

Nach dem Update

Seit dem Update hat sich das verändert. Relative Pfade sind nicht mehr relativ zum aktuellen Beitrag bzw. Page Bundle sondern immer relativ zum static-Verzeichnis der Website:

images:
  - relativer-pfad/bild.jpg

# Ergebnis: /relativer-pfad/bild.jpg

Dann gibt es noch die Neuerungen, dass fürs Artikelbild automatisch das erste gefundene Bild eines Page Bundles verwendet wird, wenn folgender Dateiname passt (in dieser Reihenfolge) UND KEINE Variable images im Front Matter definiert ist:

• *feature*
• *cover*
• *thumbnail*

Hierbei sollte ein Bild verwendet werden, das in den Breiten von 180 Pixel und um 500 Pixel noch gut aussieht, da die Artikelbilder in der normalen Ansicht sehr klein und in der mobilen Ansicht sehr groß angezeigt werden.

Vielleicht könnte man hier noch einen Feature Request stellen, damit für das verwendete Bild automatisch die benötigten Größen von Hugo generiert werden. Technisch ist das möglich.

Twitter Card und Open Graph

Für die Twitter Card und den Open Graph wird immer das Artikelbild verwendet. Gibt es kein Artikelbild, dann nutzen Twitter Card und Open Graph das in der config.toml eingestellte Bild der Variable logo=. Vor dem Update gab es in letzterem Fall gar kein Bild.

Die Lösung mit dem logo finde ich nicht gut. Denn normalerweise wird das Logo auf der Website oben nur in 30x30 Pixeln dargestellt, auf Twitter oder anderen Social-Media-Plattformen aber mit über 500 Pixeln. Auch hier wäre es meiner Ansicht nach möglich, automatisch die Größenvarianten des Logos von Hugo erstellen zu lassen.

Somit wurde die Handhabung im Theme an die Funktionsweise in Hugo selbst angeglichen.