Image Sizer Edit View

Magnolia Image Sizer Module

Background Story

The visitor of the website uses different devices and screen resolutions. Any website has some breakpoints for creating the best experience for the client. The layout directives of the breakpoints are fitting the contents to the avialable screen space. 

For any image used on the website, the content operator needs to create the desired format for any breakpoint manually, which takes a huge amount of time. In addition, some of the components of a website use different image formats than other components. An image created and cutted for one component can’t be used with another component. Therefore the flexibility of the content creation process is affected negatively and results in a noticeable error rate. 

In our case, a content operator needs to send a request for a set of images matching the particular component by email, the art division then creates the images for mobile, tablet, desktop etc. Mistakes are made due to misunderstandings and the lack of knowledge of the component requirements, which results in an increasing effort and cost for adjustments and revisions. 

Solution - Responsive Imaging

Only one image with a well resolution is needed and must be uploaded to the Magnolia DAM. Once the content operator embedds the asset to a content component, a focus area of the image must be seledted. All image derivates needed on each breakpoint are created on the fly, setting the focus point for each image derivate to the middle of the image. This means a vast reduce of complexity on the image creation process. Also the error count is permanently minimized. 

For the software engineer, the embedding is quiet easy. The adjustment for the image derivates is just once created during the layout prototyping process. The image dimension is used when programming the layout sourcecode fragments.  

The position of the clipping may move if the focus point is near the border. Frontent developers are even able to work with images that using overflows. Classes can be used for anchoring the image.  

Example

  • Image Sizer Edit View

    Example 1

    Edit View

  • Image Sizer View

    Example 2

    Desktop Viewport

  • Image Sizer View

    Example 3

    Mobile Viewport

Embedding and Module Handling

The Sizer module is an extension to the Magnolia Imaging module. It adds a new Image Generator which creates cropped/resized images by given Parameters. This way, given one asset, multiple variations can be rended for different breakpoints.  

Parameters are provided via PathVariable, supporting default Magnolia Caching behaviour. 

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

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

Pre-Requirements

  • Compaible with Magnolia CE and Magnolia EE 
  • Minimum Version 5.7  

 

Maven Dependency

<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> 

Usage in Magnolia CMS Templating

Yaml Configuration: 

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

or: 

fieldType: sizerImageField 

in addition, the following line of code must be used in the component definiton: 

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

The Model Class is not necessary if the SizerImageElement is fetched via the TemplatingFunctions. 

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 
 

Templating Functions

Starting from Version 1.3, TemplatingFunctions are installed and useable by the name “sizerfn”. 

${sizerfn.sizerImageElement(content, propertyName) 

... creates an instance of SizerImageElement by using the desired ContentMap and the corresponding 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 this example, “product” is the ContentMap of another Page. Within this Page, a „sizerImageField“ with the name “teaserImage” was created. 

By using the templatig functions, the SizerImage is callable within any ContentMap without the need of using a FieldRenderingModel.