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.
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
- Compaible with 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>
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
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.
