Bildauswahl mit Bildbeschnitt

Bildauswahl mit Bildbeschnitt

Das Bildbeschnitt-Widget bietet einen neuen Feldtyp für die Formulareditoren, mit dem es möglich ist einen Bildausschnitt für ein Bild zu bestimmen.

Verwendung

{ "feature": "Input/ImageCrop" }

Verwendung in Widgets

{ // [...], "formType": "File", "configuration": { // [...], "feature": "Input/ImageCrop" }  } // [...] }

Konfiguration

Parametererklärung

Bezeichung

Mögliche Werte

Beschreibung

Bezeichung

Mögliche Werte

Beschreibung

feature

Input/ImageCrop

Fügt Buttons zum Zuschneiden und Zurücksetzen des Beschnitts hinzu.



Feld-Konfiguration

Um das Widget nutzen zu können muss im ersten Schritt ein neues Feld angelegt werden. Bei dem Feld müssen folgende Felder ausgefüllt sein. Danach muss das Feld noch mit dem jeweiligen Print-Template verknüpft werden.

Feld

Wert

Feld

Wert

Identifikator

frei wählbar

Name

frei wählbar

Formular-Typ

feature

Vordefinierter Wert

{"x":0, "y":0, "w":0, "h":0, "height":0, "width":0}

Feldkonfiguration (json)

{ "feature": "Input\/ImageCrop", "h5eRuleFeature": "ruleset\/image\/crop", "h5eRuleKeys": { "0": "value" }, "h5eRulePlugin": "Input\/ImageCrop", "syncKeywording": true, }

Template-Konfiguration

Anschließend muss bei den jeweiligen Template-Elementen, die in Abhängigkeit zu dem neuen Feld stehen sollen, das Feld als "Feld-Callback" eingetragen werden.

Funktionsweise

Bei Anwendung des Features in einem Editor (w2p-core) wird im Hintergrund ein neues Bild physikalisch erzeugt und mit der Ordnerstruktur des Originalbildes im Systemordner Input-ImageCrop abgelegt. Dabei wird der Dateiname mit einem Hash auf Basis der Cropping-Einstellungen ergänzt, weiterhin wird im Feld Bildname ein Hinweis auf das Originalbild ergänzt.

Optionale Synchronisierung der Bildverschlagwortung

Die Einstellung syncKeywording ist optional. Bei true werden folgende Felder der Ursprungsdatei auf die neue Datei übertragen:

  • Beschreibung [description]

  • Bildname [imageName]

  • Bildtitel [imageTitle]

  • Alternativtext: [imageAltText]

  • Alle ODM-Felder