Beim Anschauen des Blogs auf einem Smartphone ist mir aufgefallen, dass Bilder aus der Galerie, die als “Thumbnail” in ca. 400 Pixel Breite angezeigt werden, sehr matschig aussahen. Das lag daran, dass der Shortcode der Galerie per Voreinstellung kleinere Varianten der Bilder mit maximal 300 Pixel Breite bzw. 150 Pixel Höhe renderte, aber diese größer darstellte.

Das erste Bild ist matchig, das zweite (nach der Änderung im Blog), ist höher aufgelöst.

Höhere Auflösung für Thumbnails

Das habe ich nun auf maximal 450 mal 450 Pixel angepasst und nun sieht das richtig gut aus. Der Größenunterschied zu 300 mal 150 Pixel ist nur minimal.

Realisiert habe ich das mit einem Eintrag in den Abschnitt Params in der Hugo-Konfiguration:

gallerythumbnailResizeOptions = "450x450 q85 Lanczos"

Zudem kann man pro Galerie den Vorgabewert überschreiben mit:

{{​< nat_gallery match="images/*" … thumbnailResizeOptions="850x850 q85 Lanczos" … >​}}

Bei diesem Blogbeitrag z. B., wo es sehr breite Panoramascreenshots gibt, habe ich den Wert auf 850 x 850 erhöht, damit es gut aussieht.

Noch besser wäre es natürlich, wenn der Shortcode ein srcset für die Anzeigegrößen nutzen würde und Hugo dann alle möglichen Größen rendern würde.

Hovereffekt

Zusätzlich habe ich auch noch thumbnailHoverEffect aktiviert, sodass beim Hovern mit dem Mauszeiger die Bilder um den Faktor 1,1 vergrößert dargestellt werden. Das ist wenig, sieht aber schön aus, wie ich finde.

Auch das kommt in die Hugo-Konfiguration und ist danach Vorgabe für alle Galerien:

gallerythumbnailHoverEffect = "enlarge"