Bilder bearbeiten: Drehen, zuschneiden und Fokuspunkt festlegen

Du kannst ein Bild direkt im Admin-Bereich bearbeiten, nachdem du es hochgeladen hast. Du kannst es drehen, zuschneiden und dem System mitteilen, wo sich das Motiv befindet, damit das Wichtigste immer im Bild bleibt, wenn das Theme es zuschneidet. Dabei kannst du nichts kaputtmachen: Das Original bleibt immer unverändert, und du kannst die Bearbeitung mit einem Klick zurücksetzen.

So öffnest du die Bildbearbeitung

Die Bildbearbeitung ist überall dort verfügbar, wo du im Admin-Bereich Bilder hochlädst: bei Produkten, Kategorien, Seiten, Blogbeiträgen, Landingpages, Marken, Kampagnen, Versandarten, Zahlungsarten und Sicherheitsprofilen.

1. Rufen Sie das Produkt oder die Seite auf, auf der sich das Bild befindet.
2. Suchen Sie den Bildbereich. Bei Produkten heißt dieser „Produktbilder“.
3. Klicken Sie auf das Bild selbst. Es öffnet sich ein Fenster mit den Bearbeitungswerkzeugen.

Das Fenster verfügt über zwei Registerkarten: „Zuschneiden und drehen“ sowie „Fokuspunkt“.

Bild drehen

Verwende „Nach links drehen“ oder „Nach rechts drehen“. Das Bild dreht sich jeweils um eine Vierteldrehung. Das ist genau derselbe Vorgang, den du von deinem Smartphone oder Computer kennst, und es geht kein Qualitätsverlust verloren.

Beachte, dass ein Zuschchnitt entfernt wird, wenn du das Bild drehst. Das ist beabsichtigt: Ein Rahmen, den du um ein querformatiges Bild gezogen hast, macht keinen Sinn, wenn das Bild plötzlich hochformatig ist. Drehe zuerst, schneide danach zu.

Bild zuschneiden

Ziehe einen Rahmen über den Ausschnitt, den du behalten möchtest. Du kannst an den Ecken und an den Seiten ziehen, und du kannst den gesamten Rahmen verschieben, indem du in der Mitte ziehst.

Im Feld „Format“ kannst du den Rahmen auf ein bestimmtes Seitenverhältnis festlegen:

• „Frei “ bietet dir volle Freiheit.
• „Quadratisch“ (1:1) eignet sich für Produktkarten und für Instagram.
• „Querformat“ (4:3) und „Breitformat“ (16:9) eignen sich für Banner und Titelbilder.
• „Hochformat“ (3:4) eignet sich für Kleidung und andere hohe Motive.

Wenn du den Zuschnitt wieder entfernen möchtest, klicke auf „Zuschnitt entfernen“.

Fokuspunkt: Halte das Motiv im Bild

Themen zeigen Bilder oft in festen Formaten an. Eine Produktkarte auf der Startseite kann zum Beispiel komplett quadratisch sein, auch wenn dein Bild breit ist. Dann muss ein Teil des Bildes abgeschnitten werden, und bisher wurde immer von der Mitte aus geschnitten.

Das geht schief, wenn das Motiv nicht in der Mitte steht. Steht das Model auf der linken Seite des Bildes, fällt der Kopf oder die Hälfte der Person aus dem quadratischen Ausschnitt heraus.

Mit einem Fokuspunkt legst du fest, wo sich das Motiv befindet. Gehe auf die Registerkarte „Fokuspunkt“ und klicke auf die Stelle im Bild, die immer mit dabei sein soll. Es erscheint ein blauer Punkt. Wenn das Programm das Bild anschließend zuschneidet, erfolgt der Ausschnitt um deinen Punkt herum statt in der Mitte.

Sie können den Punkt verschieben, indem Sie an eine neue Stelle klicken, und ihn mit „Fokuspunkt entfernen“ wieder löschen. Ohne Fokuspunkt wird wie bisher von der Mitte aus beschnitten.

Der Fokuspunkt wird nur verwendet, wenn das Bild auf ein festes Format zugeschnitten werden soll. Wird das Bild in seiner vollen Höhe und Breite angezeigt, beispielsweise auf der Produktseite, spielt der Punkt keine Rolle.

Du kannst dein Bild nicht zerstören

Das Originalbild wird niemals überschrieben. Drehung, Zuschneiden und Fokuspunkt werden als wenige Zahlen neben dem Bild gespeichert und erst dann angewendet, wenn das Bild im Shop angezeigt wird.

Deshalb kannst du deine Änderungen jederzeit rückgängig machen. Die Schaltfläche „Auf Original zurücksetzen“ am unteren Rand des Fensters entfernt Drehung, Ausschnitt und Fokuspunkt auf einmal, und das Bild ist wieder so, wie es war, als du es hochgeladen hast. Das gilt auch noch Monate später.

Bilder, die du bearbeitet hast, werden in der Bildübersicht mit einem kleinen Vermerk namens „Bearbeitet“ gekennzeichnet, sodass du dies erkennen kannst, ohne sie zu öffnen.

Hochladen, Reihenfolge und Alt-Text

Der Bildbereich funktioniert im gesamten Admin-Bereich gleich:

• Hochladen: Ziehe die Bilder in das gestrichelte Feld oder klicke auf „Vom Computer auswählen“. Die Bilder werden sofort hochgeladen, sodass du die Seite nicht erst speichern musst, um Alt-Text einzugeben.
• Reihenfolge: Zieh am Griff in der Ecke eines Bildes, um es zu verschieben. Die Reihenfolge wird automatisch gespeichert. Das erste Bild ist das Hauptbild.
• Alt-Text: Geben Sie eine kurze Beschreibung des Bildinhalts ein. Diese wird gespeichert, sobald Sie die Seite speichern.
• Löschen: Setze ein Häkchen bei „Dieses Bild löschen“ und speichere die Seite.

Du kannst PNG-, JPEG-, GIF- und WebP-Dateien hochladen. SVG wird nicht unterstützt, da die Bilder auf die vom Theme verwendeten Größen skaliert werden müssen.

Wenn ein Bild vom Handy falsch herum ist

Handykameras speichern ein Bild manchmal im Querformat, obwohl es im Hochformat aufgenommen wurde, und fügen der Datei einen Hinweis hinzu, wie es gedreht werden soll. Nicht alle Systeme lesen diesen Hinweis, sodass ein im Hochformat aufgenommenes Bild nach dem Hochladen möglicherweise im Querformat angezeigt wird.

In diesem Fall kannst du das im Handumdrehen korrigieren: Klicke auf das Bild und verwende „Nach links drehen“ oder „Nach rechts drehen“, bis es richtig ausgerichtet ist. Die Drehung wird gespeichert, ohne deine Originaldatei zu verändern, sodass du sie jederzeit wieder zurücksetzen kannst.

Für Entwickler

Das Zuschneiden und Drehen erfolgt direkt am Bild selbst, sodass das Theme nichts tun muss. Sowohl „Fit“ als auch „Box“ arbeiten mit dem bearbeiteten Bild, und der Fokuspunkt wird von „Box“ automatisch verwendet.

Wenn dein Theme das Bild selbst mit CSS zuschneidet, kannst du den Fokuspunkt als fertiges ` object-position` abrufen:

<{if $image->getFocalPoint()}>
    <img src="<{$image->getSrc(800, 800, 'box')}>" alt="<{$image->getDescription()|escape}>"
         style="object-fit: cover; object-position: <{$image->getFocalPoint()}>"/>
<{/if}>

Es gibt außerdem die Funktionen ` getFocalX()` und `getFocalY()`, die Werte zwischen 0 und 1 zurückgeben oder nichts, wenn kein Punkt festgelegt wurde.

Über die REST-API sind die Felder „rotate“, „crop“ und „focal“ bei jedem Bild vorhanden, sowohl beim Abrufen als auch beim Speichern. Die Drehung wird in Grad im Uhrzeigersinn angegeben, der Ausschnitt besteht aus vier Zahlen zwischen 0 und 1 in der Reihenfolge x, y, Breite und Höhe, und der Fokuspunkt besteht aus zwei Zahlen zwischen 0 und 1. Der Ausschnitt wird auf das gedrehte Bild angewendet, d. h., die Drehung wird zuerst durchgeführt.

Häufig gestellte Fragen

Lösche ich mein Originalbild, wenn ich es zuschneide?

Nein. Das von dir hochgeladene Bild bleibt unverändert erhalten. Der Zuschnitt wird erst bei der Anzeige des Bildes angewendet, und du kannst jederzeit auf „Auf Original zurücksetzen“ klicken, um alles wiederherzustellen.

Muss ich etwas anders machen, oder funktioniert es wie gewohnt?

Es funktioniert wie gewohnt. Du ziehst die Bilder wie bisher hinein. Der Unterschied besteht darin, dass sie sofort hochgeladen werden und du auf ein Bild klicken kannst, wenn du es bearbeiten möchtest.

Muss ich alle meine alten Bilder erneut bearbeiten?

Nein. Alte Bilder bleiben unverändert und sehen genauso aus wie zuvor. Du kannst sie bearbeiten, wenn du möchtest, musst es aber nicht.

Wie kann ich sehen, ob ein Kollege ein Bild bereits bearbeitet hat?

Bearbeitete Bilder sind in der Bildübersicht mit einem kleinen Symbol namens „Bearbeitet“ gekennzeichnet. Wenn du das Bild öffnest, siehst du die Drehung und den Rahmen so, wie sie gespeichert wurden.

Funktioniert das bei Produkten und Kategorien gleich?

Ja. Der Bildbereich ist überall gleich. Produkte haben pro Bild einige zusätzliche Felder, zum Beispiel die Zuordnung zu einer Variante, aber das Hochladen, die Reihenfolge und die Bearbeitung funktionieren gleich.

Kann ich den Fokuspunkt für mehrere Bilder gleichzeitig festlegen?

Nicht im Admin-Bereich, wo dies Bild für Bild festgelegt wird. Wenn du viele Produkte hast, kannst du die Felder über die REST-API festlegen, die Rotation, Zuschneiden und Fokuspunkt für jedes Bild umfasst.

Belastet das den Server stärker und wird der Shop dadurch langsamer?

Nein. Es werden nur wenige Daten zusätzlich zum Original gespeichert. Das Bild in der bearbeiteten Version wird einmal erstellt und anschließend wiederverwendet, genau wie alle anderen Bildgrößen im Shop.

Wie lange dauert es, bis die Kunden die Korrektur sehen?

Sofort. Ein bearbeitetes Bild erhält eine eigene Adresse, sodass Kunden die neue Version sehen und nicht eine alte Version aus dem Cache des Browsers.

Wird der Bildausschnitt auch in Google Shopping und beim Teilen eines Links übernommen?

Ja. Feeds und geteilte Bilder verwenden dieselben Bilder wie der Shop, sodass Ihre Bildrotation und Ihr Bildausschnitt beim nächsten Abruf des Feeds übernommen werden.

Reicht der Alt-Text für SEO aus?

Der Alt-Text beschreibt das Bild für Suchmaschinen und Screenreader und ist auch Teil der Bild-URL. Er ersetzt jedoch nicht den eigentlichen Text und die Beschreibung des Produkts.