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.

Status INCUBATOR
TypeEnhancement
SubJar
JIRARESPDAM
Git

dam-images-responsive

Installation

Maven is the easiest way to install the modules. Add the following dependencies to your bundle:

<dependency>
    <groupId>info.magnolia.dam</groupId>
    <artifactId>magnolia-dam-images-responsive</artifactId>
    <version>${responsiveDamVersion}</version>
</dependency>

Versions

1.0.12

Magnolia 5.6

1.0.11

Magnolia 5.6

1.0.10Magnolia 5.6

Usage

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

Configuration

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.

Properties:

minHeight

optional, required if minWidth is not set

The minimum height of the focal area in pixel.

minWidth

optional, required if minHeight is not set

The minimum width of the focal area in pixel.

ratio

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:

Properties:

maxWidth

optional

The maximum image width allowed in the editor.

maxHeight

optional

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

magnoliaAuthor

The context root

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

/16by9

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. 

Freemarker
[#if article.imagesource?hasContent]
<!-- Image -->
<div class="image-block">
    [#assign asset = damfn.getAsset(article.imagesource)!]
    [#if asset?hasContent]
        <picture>
            <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="${asset.link!}" alt="${asset.caption!}">
        </picture>
    [/#if]
</div>
[/#if]


Warnings

  • This module is at INCUBATOR level.

Changelog

  • 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
    • Moved the variation definition from the component level to the DAM level
  • No labels