Die Besucher der Website verwenden unterschiedliche Geräte und Bildschirmauflösungen. Jede Website hat einige Haltepunkte, um das beste Erlebnis für den Kunden zu schaffen. Die Layout-Richtlinien der Haltepunkte dienen dazu, den Inhalt an den verfügbaren Bildschirmplatz anzupassen.

Für jedes Bild, das auf der Website verwendet wird, muss der Content-Operator das gewünschte Format für jeden Haltepunkt manuell erstellen, was sehr zeitaufwendig ist. Hinzu kommt, dass einige Komponenten einer Website andere Bildformate verwenden als andere Komponenten. Ein Bild, das für eine Komponente erstellt und ausgeschnitten wurde, kann nicht für eine andere Komponente verwendet werden. Dies beeinträchtigt die Flexibilität des Inhaltserstellungsprozesses und führt zu einer spürbaren Fehlerquote.

In unserem Fall muss ein Content-Operator eine Anfrage für eine Reihe von Bildern, die zu einer bestimmten Komponente passen, per E-Mail senden, die Grafikabteilung erstellt dann die Bilder für Handy, Tablet, Desktop usw. Aufgrund von Missverständnissen und mangelnder Kenntnis der Komponentenanforderungen werden Fehler gemacht, was zu einem erhöhten Aufwand und Kosten für Anpassungen und Überarbeitungen führt.

Es wird nur ein Bild mit einer guten Auflösung benötigt, das in das Magnolia-DAM hochgeladen werden muss. Sobald der Content-Operator das Asset in eine Inhaltskomponente eingebettet hat, muss ein Fokusbereich des Bildes ausgewählt werden. Alle Bildderivate, die für jeden Breakpoint benötigt werden, werden on the fly erstellt, wobei der Fokuspunkt für jedes Bildderivat auf die Mitte des Bildes gesetzt wird. Dies bedeutet eine enorme Reduzierung der Komplexität des Bilderzeugungsprozesses. Auch die Fehlerzahl wird dauerhaft minimiert.

Für den Softwareentwickler ist die Einbettung denkbar einfach. Die Einstellung für die Bildableitungen wird nur einmal während des Layout-Prototyping-Prozesses erstellt. Die Bilddimension wird bei der Programmierung der Layout-Sourcecode-Fragmente verwendet.  

Die Position des Ausschnitts kann sich verschieben, wenn der Fokuspunkt in der Nähe des Randes liegt. Frontent-Entwickler sind sogar in der Lage, mit Bildern zu arbeiten, die Überläufe verwenden. Zur Verankerung des Bildes können Klassen verwendet werden. 

Das Sizer-Modul ist eine Erweiterung des Magnolia Imaging-Moduls. Es fügt einen neuen Bildgenerator hinzu, der nach vorgegebenen Parametern beschnittene/verkleinerte Bilder erzeugt. Auf diese Weise können von einem Asset mehrere Varianten für verschiedene Haltepunkte wiedergegeben werden.  

Die Parameter werden über PathVariable bereitgestellt und unterstützen das Standard-Caching-Verhalten von Magnolia.

Breakdown: https://www.dev5310.com/.imaging/{generatorname:sizer}/{width}/{height}/{relativeXPos}-{relativeYPos}/{workspace}{jcr-path} 

Beispiel: https://www.dev5310.com/.imaging/sizer/767/250/38-49/dam/website/index/Stage-Tests/Hafenluft.JPG

_Kompatibilität mit Magnolia CE and Magnolia EE 

_Minimum Version 5.7  

<dependency> 
    <groupId>com.dev5310</groupId> 
    <artifactId>sizer</artifactId> 
    <version>1.3</version> 
</dependency> 

<repository> 
    <id>dev5310</id> 
    <url>http://artifactory.dev5310.com:8081/artifactory/lib-release-public</url> 
</repository> 

Yaml Configuration: 

class: com.dev5310.magnolia.modules.sizer.field.ImagingFieldDefinition 

or: 

fieldType: sizerImageField 

Darüber hinaus muss die folgende Codezeile in der Komponentendefinition verwendet werden: 

modelClass: com.dev5310.magnolia.core.rendering.FieldRenderingModel 

Die Model-Klasse ist nicht erforderlich, wenn das SizerImageElement über die TemplatingFunctions geholt wird.

Minimal Dialog 

form: 
  label: Sizer Image Field 
  tabs: 
    - name: main 
      label: Main 
      fields: 
 
        - name: sizerImage 
          label: Sizer Image 
          fieldType: sizerImageField 
 
actions: 
  commit: 
    class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition 
  cancel: 
    class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition 

Ab Version 1.3 werden TemplatingFunctions unter dem Namen „sizerfn“ installiert und verwendet.

${sizerfn.sizerImageElement(content, propertyName) 

... erstellt eine Instanz von SizerImageElement unter Verwendung der gewünschten ContentMap und der entsprechenden PropertyNames.

${(sizerfn.sizerImageElement(product, 'teaserImage') 
.breakpoint(1, 768, 552) 
.breakpoint(768, 992, 646) 
.breakpoint(992, 800, 632) 
.breakpoint(1400, 800, 632) 
.css('rotation-image') 
.render())!} 

In diesem Beispiel ist „product“ die ContentMap einer anderen Seite. Innerhalb dieser Seite wurde ein „sizerImageField“ mit dem Namen „teaserImage“ erstellt.

Durch die Verwendung der Templatig-Funktionen ist das SizerImage in jeder ContentMap aufrufbar, ohne dass ein FieldRenderingModel verwendet werden muss.