Die Ressourcen der Bildseite können in der Größe angepasst und beschnitten werden.

Die Ressource der Bildseite

Das Bild ist eine Page Resource, und die unten aufgeführten Verarbeitungsmethoden funktionieren nicht für Bilder in Ihrem Ordner /static.

Um alle Bilder in einer Page Bundle zu erhalten:

{{ with .Resources.ByType "image" }}
{{ end }}

Bildverarbeitungsverfahren

Die Bildressource implementiert die Methoden Resize, Fit und Fill, die jeweils das transformierte Bild mit den angegebenen Abmessungen und Verarbeitungsoptionen zurückgeben.

Größe ändern - Resize Ändert die Größe des Bildes auf die angegebene Breite und Höhe.

# Anpassen der Größe auf eine Breite von 600px und Beibehalten des Verhältnisses
{{ $image := $resource.Resize "600x" }}
# Anpassen der Größe auf eine Höhe von 400px und Beibehalten des Verhältnisses
{{$image := $resource.Resize "x400"}}
# Größe ändern auf eine Breite von 600px und eine Höhe von 400px
{{$image := $resource.Resize "600x400" }}

Passform - Fit Skaliert das Bild unter Beibehaltung des Seitenverhältnisses auf die angegebenen Abmessungen. Sowohl Höhe als auch Breite sind erforderlich.

{{ $image := $resource.Fit "600x400" }}

Füllen - Fill Ändert die Größe und Zuschneiden des Bildes, um es an die angegebenen Abmessungen anzupassen. Sowohl Höhe als auch Breite sind erforderlich.

{{ $image := $resource.Fill "600x400" }}

Photo by Benedikt Geyer on Unsplash

Achtung: Bildoperationen in Hugo speichern derzeit keine EXIF-Daten, da dies vom Go’s Image-Paket nicht unterstützt wird. Dies wird in Zukunft verbessert.

Bildverarbeitungsoptionen

Zusätzlich zu den Abmessungen (z.B. 600x400) unterstützt Hugo eine Reihe von zusätzlichen Bildoptionen.

JPEG-Qualität Nur relevant für JPEG-Bilder, Werte 1 bis einschließlich 100, höher ist besser. Der Standardwert ist 75.

{{$image.Resize "600x q50"}}

Drehen Dreht ein Bild um den angegebenen Winkel gegen den Uhrzeigersinn. Die Drehung wird zuerst durchgeführt, um die Abmessungen korrekt zu bestimmen. Der Hauptzweck besteht darin, die EXIF-Orientierung von JPEG-Bildern manuell korrigieren zu können.

{{$image.Resize "600x r90"}} 

Anker Nur relevant für die Fill-Methode. Dies ist nützlich für die Generierung von Miniaturansichten, bei denen sich das Hauptmotiv beispielsweise in der linken Ecke befindet. Gültig sind Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, Bottom, BottomRight.

{{$image.Fill "300x200 BottomLeft"}}

Resample-Filter Filter, der bei der Größenänderung verwendet wird. Standard ist Box, ein einfacher und schneller Resampling-Filter, der sich zum Herunterskalieren eignet.

Beispiele: Box, NearestNeighbor, Linear, Gaussian.

Siehe https://github.com/disintegration/imaging für weitere Informationen.

{{$image.Resize "600x400 Gaussian"}}

Beispiele für die Bildverarbeitung

Das Foto des Sonnenuntergangs, das in den folgenden Beispielen verwendet wird, ist Copyright Bjørn Erik Pedersen (Creative Commons Attribution-Share Alike 4.0 International license).

.Resize “300x”

.Fill “90x120 left”

.Fill “90x120 right”

.Fit “90x90”

.Resize “300x q10”

Dies ist die Abkürzung, die in den obigen Beispielen verwendet wird: /layouts/shortcodes/imgproc.html

{{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
{{ $command := .Get 1 }}
{{ $options := .Get 2 }}
{{ if eq $command "Fit"}}
{{ .Scratch.Set "image" ($original.Fit $options) }}
{{ else if eq $command "Resize"}}
{{ .Scratch.Set "image" ($original.Resize $options) }}
{{ else if eq $command "Fill"}}
{{ .Scratch.Set "image" ($original.Fill $options) }}
{{ else }}
{{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
{{ end }}
{{ $image := .Scratch.Get "image" }}
<figure style="padding: 0.25rem; margin: 2rem 0; background-color: [[cccc]]">
	<img style="max-width: 100%; height: auto;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
	<figcaption>
	<small>
	{{ with .Inner }}
	{{ . }}
	{{ else }}
	.{{ $command }} "{{ $options }}"
	{{ end }}
	</small>
	</figcaption>
</figure>   

Und so wird es verwendet:

{{ < imgproc sunset Resize "300x" /> }}

Tipp: Beachten Sie die obige selbstschließende Shortcode Syntax. Der imgproc Shortcode kann sowohl mit als auch ohne inneren Inhalt aufgerufen werden.

Bildverarbeitungs-Konfiguration

• Siehe Image Processing Config