Zielgruppe BetriebVersion: GSB10.1Bilder

Skalierungen

Der Editor bringt einen Satz an Standard Skalierungen und Schnittgrößen mit und bietet die Möglichkeit eigene Konfigurationen zu verwenden.

Standard Skalierungen und Schnittgrößen

Der Editor stellt die folgenden Standard Skalierungen zur Verfügung:

• Breite 100px
• Höhe 100px
• 100x100
• 50%

Weiterhin werden die folgenden Standard Schnittgrößen bereitgestellt:

• 100x100
• Rand 10px

Mandantenspezifische Skalierungen und Schnittgrößen

Es besteht auch die Möglichkeit die Konfiguration zu überschreiben. Dazu wird unter __EditorConfig/Json/Categories/Dialog/EditImage ein HTML-Fragment angelegt:

Definition mandantenspezifischer Skalierungen und Schnittgrößen

{
  "@type": "EditImageConfiguration",
  "scales": [ (1)
    {
      "@type": "EditImageScale", (2)
      "label": "Base.Popup.Dialog.EditImage.scaleWidth100", (3)
      "scale": "100x" (4)
    },
    {      "@type": "EditImageScale",
      "label": "Base.Popup.Dialog.EditImage.scaleHeight100",
      "scale": "x100"
    }
  ],
  "crops": [ (5)
    {
      "@type": "EditImageCrop", (6)
      "label": "Base.Popup.Dialog.EditImage.cropSquare100", (7)
      "crop": "100x100" (8)
    },
    {
      "@type": "EditImageCrop",
      "label": "Base.Popup.Dialog.EditImage.cropBorder10",      "crop": "10"
    }
  ]
}

(1)	Die Liste der Skalierungen
(2)	Typ der Skalierungs-Definition (immer EditImageScale)
(3)	Das Label für die Skalierung zur Anzeige im Dialog
(4)	Definition der Skalierung. Folgende Definitionen sind möglich: BREITExHOEHE, BREITEx, xHOEHE, PROZENT. Wird die Breite oder Höhe nicht angegeben, wird der Wert dem Seitenverhältnis entsprechend gewählt. Bei der Angabe einer prozentuellen Größe entfällt das Prozentzeichen (Beispiel: 50).
(5)	Die Liste der Schnittgrößen
(6)	Typ der Schnittgrößen-Definition (immer EditImageCrop)
(7)	Das Label für die Schnittgröße zur Anzeige im Dialog
(8)	Definition der Schnittgröße. Folgende Definitionen sind möglich: XxYxBREITExHOEHE, BREITExHOEHE, BREITEx, xHOEHE, RAND. Über X und Y kann die initiale Position der linken oberen Ecke bestimmt werden. Analog zur Skalierung kann die Breite oder die Höhe automatisch berechnet werden. Wird nur eine Zahl angegeben, so wird sie als Rand in Pixeln interpretiert.

Neben dieser Konfiguration, die für alle Eigenschaften gilt, können auch Konfigurationen für einzelne Eigenschaften angelegt werden. Soll beispielsweise die Eigenschaft normal eine eigene Konfiguration besitzen, wird analog zur allgemeinen Konfiguration ein HTML-Fragment unter __EditorConfig/Json/Categories/Dialog/EditImage-normal angelegt.

Responsiver Bilder

Bearbeitungsoptionen

Die Konfiguration der Bildbearbeitungsoptionen können bei der projekt-spezifischen Editorkonfiguration eingestellt werden. Diese Konfigurationsoptionen werden nachfolgend näher beschrieben.

Allgemeine Optionen

Innerhalb der allgemeinen Einstellung können für alle Bild-Dokumente

• die Anzahl der Bildverwendungen (bis zu maximal 9 Verwendungen),
• Benennung und Reihenfolge der Bildverwendungen (z.B. Standard, Landscape, Portrait, Sonderformat),
• die Verwendung von eigenen Bildern für die Verwendungen

einheitlich und übergreifend festgelegt werden.

Diese Angaben müssen aus den projektspezifischen Layout-Vorgaben extrahiert und bei der Konfiguration der Bildbearbeitung entsprechend berücksichtigt werden.

Im Folgenden wird beispielhaft eine Konfiguration gezeigt und erklärt. Das betreffende Konfigurationsdokument findet sich im Mandanten unter dem Pfad __EditorConfig/Json/Categories/Imaging/ImageConfig.

Allgemeine Optionen der Bildbearbeitung
{
"@type": "ImageConfig", (1)
"minSize": "20", (2)
"overSize": "200", (3)
"previewScaleBase": 2, (4)
"previewCount" : 3, (5)
"allowSeparateImages": true, (6)
"channelConfigs": {
...
},
"tilesConfig": {

(1)	Der Typ der Konfiguration, immer ImageConfig
(2)	Die minimale Höhe/Breite für die Vorschau einer Skalierungsstufe
(3)	Die Höhe/Breite, ab der eine Skalierungsstufe nur in der Übersicht sichtbar ist
(4)	Die Basis für die Berechnung der Skalierungsstufen-Vorschau
(5)	Die Anzahl der zu berechnenden Vorschau-Skalierungsstufen
(6)	Definiert, ob für jeden Kanal ein eigenes Bild verwendet werden kann

Optionen pro Bildverwendung

Neben den allgemeinen Einstellungen können auch die voreingestellten Werte einer einzelnen Bildverwendung (z.B. Portrait oder Landscape) einheitlich für alle Bild-Dokumente festgelegt werden:

• Formatangabe: Die Formatangabe wird durch die Angabe in Pixeln definiert (z.B. 400x300 oder 500x200). Die Angaben sollten aus den projekt-spezifischen Layout-Vorgaben abgeleitet werden.
• Individuelle Ausschnittgröße: Über diese Option wird festgelegt, ob der durch die Standardwerte vorgegebene Bildausschnitt durch den Redakteur angepasst werden kann (vgl. Abschnitt "Individuelle Ausschnittsgröße").

Im Folgenden wird die Konfiguration eines Kanals gezeigt und erklärt (Dokument __EditorConfig/Json/Categories/Imaging/ImageConfig):

Optionen der Bildbearbeitung
{
"channelConfigs": { (1)
"normal": { (2)
"@type": "ChannelConfig", (3)
"format": "400x300", (4)
"individual": false, (5)
"displayName": "Normal" (6)
},
}
}

(1)	Der Liste der Kanalkonfigurationen
(2)	Name der Property
(3)	Der Typ der Konfiguration, immer ChannelConfig
(4)	Das Format des Ausschnittes in Pixeln
(5)	Definiert, ob ein Redakteur den Ausschnitt anpassen kann
(6)	Der Anzeigename des Kanals

Optionen für die Kacheln

Die Kacheln, die auf der rechten Seite als kleine Vorschau dargestellt werden, können ebenfalls konfiguriert werden. So lässt sich beispielsweise die Reihenfolge der Kacheln verändern oder die Größe anpassen.

Im Folgenden wird die Konfiguration der Kacheln gezeigt und erklärt (Dokument __EditorConfig/Json/Categories/Imaging/ImageConfig):

Optionen der Kacheln

{
"tilesConfig": { (1)
"@type": "TilesConfig", (2)
"original": { (3)
"@type": "Tile", (4)
"propertyName": "poster", (5)
"maxWidth": 100, (6)
"maxHeight": 100 (7)
},
"individual": {}, (8)
"tileRows": [[]] (9)
}

(1)	Die Konfiguration der Kacheln
(2)	Der Typ der Konfiguration, immer TilesConfig
(3)	Die Konfiguration der Kachel, die das Originalbild darstellt
(4)	Der Typ der Kachel-Konfiguration, immer Tile
(5)	Die Property, die diese Kachel darstellt
(6)	Die maximale Breite der Kachel
(7)	Die maximale Höhe der Kachel
(8)	Die Konfiguration der Kachel mit veränderbarem Bildausschnit (ein Objekt des Typs Tile)
(9)	Die Konfiguration der restlichen Kacheln. Über diese Liste von Listen lassen sich die einzelnen Kacheln in Reihen konfigurieren. Die Konfiguration erfolgt hier wieder durch Objekte des Typs Tile.

Speicherung im Dokumenttyp

Zur Umsetzung der Bildoptimierungen müssen die obigen Konfigurationsoptionen im Dokumenttyp ResponsiveImage gespeichert werden.

Dazu wird das Originalbild in der Image-Property „Poster“ gespeichert.

Die

• Position des Fokuspunktes
• Standardskalierung
• Ausrichtung des Bildausschnitts werden in der cl2-Property cl2PosterSizes als cl2-Einträge verwaltet. Die cl2-Properties cl2PosterSizes wird in dem optimierten ResponsiveImage-Bildeditor lediglich zur Verwaltung bzw. Speicherung der Werte genutzt. Die cl2-Properties cl2PosterSizes wird dem Redakteur nicht dargestellt.

Innerhalb des Dokumenttyps ResponsiveImage ist neben dem Originalbild, das in der Property Poster gespeichert wird, die Konfiguration von bis zu 9 weiteren Bildverwendungen möglich. Diese Bildverwendungen werden in den bereits vorhandenen cl2-Properties cl2NormalSizes, cl2BannerSizes, cl2ThumbnailSizes, usw. gespeichert.

Rückwärtskomptabilität zum GSB/CM

In der bisherigen Verwendung des Dokumenttyps ResponsiveImage im GSB/CM stehen im Dokumenttyp für bis zu 10 Bildverwendungen entsprechende cl2- und Blob-Properties zur Verfügung, in denen pro Bildverwendungen jeweils eine Binärdatei hochgeladen werden musste.

Bildausschnitte und Skalierungsstufen konnten für jede Bildverwendung manuell konfiguriert werden.

Zur Übernahme dieser „Alt“-Daten wird in den Bildverwendungen der optimierten Bildbearbeitung das bisherige Bild aus den „Alt“-Daten übernommen. Um dieses Bild austauschen bzw. entfernen zu können, können die Bearbeitungsoptionen neben Skalierung eines Binärbildes für die dargestellte Bildverwendung angeboten (vgl. Abbildung "Verwendung bearbeiten (vorgegebene Ausschnittgröße)").

Die Bildauswahl in den Skalierungsstufen erfolgt in Abhängigkeit der verfügbaren Binärdateien. Falls kein gesondertes Bild in der Blob-Property der Bildverwendung gespeichert ist, wird das Originalbild für diesen Ausgabekanal zur Berechnung der Skalierungsstufen eingesetzt. Andernfalls wird das gesonderte Bild in der Blob-Property der Bildverwendung zur Berechnung der Skalierungsstufen benutzt.

Mit Hilfe der Schaltflächen „+“- bzw. „-“ kann das Binärbild der Bildverwendung ausgetauscht bzw. gelöscht werden.

Falls bei der Migration von ResponsiveImage-Dokumenten von GSB/CM nach GSB 10 die bisherigen Bilder und Ausgabekanäle übernommen werden sollen, kann der Dokumenttyp und der Editor der Bildbearbeitung entsprechend konfiguriert werden.

Zur Übernahme der Alt-Daten sind die bisherigen Migrationsskripte allerdings projekt-spezifisch anzupassen, da die notwendigen Konfigurationsangaben aus den Layout-Vorgaben des Mandanten zunächst abgeleitet werden müssen. Anschließend kann das konkrete Mapping der Alt-Daten auf die projekt-spezifischen Zielvorgaben erfolgen.