Page tree
Skip to end of metadata
Go to start of metadata

This module offers options to select the part of a DAM image to display per range of screen resolution.


Maven is the easiest way to install the module. Add the following dependency to your bundle:



1.1.4Magnolia 6.1
1.1.3Magnolia 6.1
1.1Magnolia 6.0

Magnolia 5.7


Magnolia 5.7


Start by configuring the variation sets according to the screen resolutions you wish to target. The set the focal points of the images.


Define the images variations

Here is a sample of a variation set for the dam workspace. A resolution for mobile, tablet, and default have been configured.



optional, required if minWidth is not set

The minimum height of the focal area in pixel.


optional, required if minHeight is not set

The minimum width of the focal area in pixel.


The display ratio of the focal area.

Limit the size of the images in the editor

By default, the max width and the max height of the images in the editor are respectively 1024px and 768px. You can change these values as following:




The maximum image width allowed in the editor.



The maximum image height allowed in the editor.

Assets app

From the assets app, select a image and press Edit asset. Then click on the Focal Area tab and select the section of the image to display per configured screen resolution. 

Build the image URL

Example: /magnoliaAuthor/.imaging/responsive/6x4/dam/Edouard/Blog/magazine-feature/magazine.png


The context root

/.imaging/responsiveThe imaging servlet and the related generator
/damThe name of the variation set to use


The name of the variation set configuration to use
/1600x900 The requested size Width x Height
/damThe JCR workspace
/Edouard/Blog/magazine-feature/magazine.png The asset path

The system will return the configuration for the closest lowest width configuration. If the system cannot find any focal area, then it returns the original picture.

The HTML5 <picture> tag

The module registers an additional templating function respdamfn which allows you to get the different image URLs per configured screen resolution. 

[#if article.imagesource?hasContent]
<!-- Image -->
<div class="image-block">
    [#assign asset = damfn.getAsset(article.imagesource)!]
    [#if asset?hasContent]
            <source media="(min-width: 1200px)" srcset="${ctx.contextPath}/.imaging/responsive/dam/16by9/1600x900/dam${asset.path!}">
            <source media="(min-width: 768px)" srcset="${ctx.contextPath}/.imaging/responsive/dam/768by1024/768x1024/dam${asset.path!}">
            <source media="(min-width: 0px)" srcset="${ctx.contextPath}/.imaging/responsive/dam/750by1334/750x1334/dam${asset.path!}">

            <img src="${!}" alt="${asset.caption!}">


  • This module is at INCUBATOR level.


  • Version 1.1.4
  • Version 1.1.3
  • Version 1.1
    • Updated for Magnolia 6.0 compatibility.
  • Version 1.0.13
  • Version 1.0.12
  • Version 1.0.11
    • RESPDAM-8 - Getting issue details... STATUS
  • Version 1.0.10
    • RESPDAM-5 - Getting issue details... STATUS
  • Version 1.0.9
  • Version 1.0.8
    • Fixed bug when uploading new assets
  • Version 1.0.7 - Initial release of the extensions version of the module.
    • Moved the variation definition from the component level to the DAM level


  1. I was able to install this module on 6.1 version and even see the focal area and the new varition is being displayed but i am unable to get it via the url. Does this module need any dependencies to be installed along with it.

  2. Jan Schulte I guess the new working version is 1.1.3 and also please did get a chance to see my my comment from above

    1. Hi Swamy Kottur
      Yes it was 1.1.3. We have just released a version 1.1.4.
      The change log is also updated.

      1. Jan Schulte Adrien Manzoni I see this error when i am in 1.1.4 and trying to edit and already existing image in DAM App

        RpcInvocationException: Unable to invoke method onActionTriggered in info.magnolia.ui.vaadin.gwt.client.actionbar.rpc.ActionbarServerRpc
        caused by InvocationTargetException
        caused by MethodException: Invocation of method actionTrigger in info.magnolia.ui.actionbar.ActionbarViewImpl$1 failed.
        caused by NoClassDefFoundError: info/magnolia/dam/imaging/responsive/field/FocalUploadField
        1. The class is present in the jar,

          I suggest to double check your Maven configuration.