Zielgruppe RedakteurVersion: GSB10.0Bild-Properties

Das heißt: ein Redakteur lädt eine Bilddatei in die Poster-Property.

In der Editorkonfiguration des Mandanten kann für weitere Verwendung eines Bildes die gewünschte Ausschnittgröße definiert werden. Aufgrund der definierten Zielgrößen wird der Ausschnitt der resultierenden Bilder automatisch gesetzt, so dass alle Verwendung durch die einmalige Definition einer Bilddatei in der Poster-Property initial gesetzt worden sind.

Der folgende Screenshot skizziert die Zuordnung einer Bilddatei zur Poster-Property exemplarisch anhand eines „Testbildes“. Die unterschiedlichen Farben des Bildes symbolisieren die in der Editorkonfiguration hinterlegten Zielgrößen für die verschiedenen Verwendungen:

• Orange: Standardgröße
• Grün: Banner
• Blau: Miniaturbild (Thumbnail)

Dieses Bild wird auch in den folgenden Screenshots und Wireframes wiederverwendet. Die farbigen Flächen des Testbildes sind bewusst auf die gewünschten Ausschnittgrößen der einzelnen Verwendungen abgestimmt, um die Funktionalitäten einfacher skizzieren zu können.

Testbild Zuordnung in der Poster-Property

Automatische Berechnung der Verwendungen

Für jede Verwendung ist in der Editorkonfiguration des Mandanten eine initiale Standardgröße definiert.

Wird die Poster-Property wie im vorherigen Kapitel „Hochladen von Bilddateien“ gefüllt, werden alle anderen Verwendungen mit Ausschnitten der Poster-Property gefüllt, wobei für jede Verwendung die konfigurierte Zielgröße zur Berechnung des abgeleiteten Bildes genutzt wird.

D.h. für jede Verwendung eines Bildes wird der Bildmittelpunkt des zu berechnenden Ausschnitts auf den Mittelpunkt des Poster-Property Bildes gesetzt. Die Größe des Ausschnitts ergibt sich anhand der initialen Zielgröße, die für diese Verwendung in der Editorkonfiguration hinterlegt wurde. Die Berechnung erfolgt nach folgender Regel:

• Wenn das Breite und Höhe des Poster-Property Bildes größer ist als die initiale Zielgröße, dann entspricht der Ausschnitt der definierten initalen Zielgröße.
• Ist das Bild kleiner als die definierte Zielgröße, dann entspricht der Ausschnitt dem gesamten Bild.

Der folgende Screenshot skizziert die automatisch ermittelten und gespeicherten Ausschnitte für das im vorherigen Kapitel skizzierte Testbild.

Automatische Definition von Bildausschnitten

Wie skizziert entsprechen die farbigen Flächen des Testbildes genau den definierten Ausschnittgrößen der einzelnen Properties, so dass die orangene Fläche der Größe des Ausschnitts des Standardbildes, das grüne Feld ist die Größe des Bannerbildes und der blaue Bereich entspricht der vorgegebenen Größe des Miniaturbildes entspricht. 

Hinweis

Bei Aktualisierung der Bilddatei in der Poster-Property erfolgt eine Rückfrage, ob die redaktionell definierten Ausschnitte der Verwendungen erhalten bleiben sollen oder ob diese neu initialisiert werden sollen.

Wenn die aktualisierte Bilddatei dem bereits vorhandenen Bild entspricht und bspw. nur die Helligkeit angepasst worden ist, dann können die definierten Ausschnitte weiterverwendet werden. Bei einem neuen Bild sollten stattdessen die Initialwerte gesetzt werden.

Auswahl der Bildquelle

Durch Klick auf das grüne Plus-Icon einer Bild-Property hat der Redakteur die Möglichkeit die Bildquelle auszuwählen. Wenn es sich bei dem aktuellen Inhalt der Property um einen Ausschnitt der Poster-Property besteht die Möglichkeit eine eigene Bilddatei auszuwählen, welche anstelle des Ausschnitts des Poster-Bildes als Bildquelle dienen soll.

Bezieht sich der aktuelle Inhalt der Property nicht auf die Poster-Property steht neben der Auswahl einer eigenen Bilddatei auch die Möglichkeit zur Verfügung die Poster-Property als Bildquelle anzugeben.

Der folgende Wireframe skizziert die unterstützten Optionen für die Zuordnung einer Bildquelle exemplarisch.

Auswahl der Bildquelle

Hinweis

Bei Anpassung der Bildquelle erfolgt eine Rückfrage, ob die redaktionell definierten Ausschnitte der Verwendung erhalten bleiben sollen oder ob diese neu initialisiert werden sollen.

Wenn die neue Bildquelle dem bereits vorhandenen Bild entspricht und bspw. nur die Helligkeit angepasst worden ist, dann können die definierten Ausschnitte weiterverwendet werden. Bei einem neuen Bild sollten stattdessen die Initialwerte gesetzt werden.

Drag & Drop

Es ist nach wie vor möglich eine Bilddatei vom Desktop über Drag & Drop direkt auf eine Bild-Property zu ziehen und somit diese Bilddatei als Bildquelle zu verwenden.

Die Drag&Drop Funktionalität zwischen einzelnen Verwendungen eines Bilddokumentes - bekannt aus älteren Versionen des GSB Editors - existiert nicht mehr, da diese aufgrund des Automatismus nicht mehr benötigt wird. D.h. es ist nicht mehr möglich, den Inhalt einer Property per Drag & Drop auf eine andere Property zu übertragen.

Responsive Bilder

Die Auswahl von Bildausschnitten zur Befüllung einer Bild-Property lässt sich zur Definition der Ausgabekanäle eines responsiven Bildes verwenden.

Wird bei einem responsiven Bild eine Property gefüllt, werden ebenfalls alle Ausgabekanäle (klein, mittel, groß) dieser Property automatisch gefüllt.

Jeder Kanal wird mit einem Bildausschnitt der Property befüllt. Die Größe dieses Bildausschnitts ist mandantenspezifisch zu konfigurieren. Für jeden Ausgabekanal muss eine Größe definiert werden.

Ausgabekanäle für responsive Bilder

Der Redakteur die Möglichkeit den gewählten Ausschnitt durch Verschieben (siehe nächste Abbildung) des Auswahlrahmens anzupassen. Die Größe des Ausschnitts ist nicht variabel.

Individuelle Ausschnitte für responsive Bilder

Hinweis

Bei Anpassung der Bildquelle erfolgt eine Rückfrage, ob die redaktionell definierten Ausschnitte der Verwendung erhalten bleiben sollen oder ob diese neu initialisiert werden sollen.

 Wenn die neue Bildquelle dem bereits vorhandenen Bild entspricht und bspw. nur die Helligkeit angepasst worden ist, dann können die definierten Ausschnitte weiterverwendet werden. Bei einem neuen Bild sollten stattdessen die Initialwerte gesetzt werden.

nach oben