Magnolia Responsive DAM Module

DAM field and support for magnolia, which allows aspects for images

License

License

GroupId

GroupId

org.sevensource.magnolia
ArtifactId

ArtifactId

magnolia-responsive-dam
Last Version

Last Version

1.3.0
Release Date

Release Date

Type

Type

jar
Description

Description

Magnolia Responsive DAM Module
DAM field and support for magnolia, which allows aspects for images
Project URL

Project URL

http://www.github.com/sevensource/magnolia-responsive-dam
Project Organization

Project Organization

SevenSource, pgaschuetz
Source Code Management

Source Code Management

http://github.com/sevensource/magnolia-responsive-dam/tree/master

Download magnolia-responsive-dam

How to add to project

<!-- https://jarcasting.com/artifacts/org.sevensource.magnolia/magnolia-responsive-dam/ -->
<dependency>
    <groupId>org.sevensource.magnolia</groupId>
    <artifactId>magnolia-responsive-dam</artifactId>
    <version>1.3.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.sevensource.magnolia/magnolia-responsive-dam/
implementation 'org.sevensource.magnolia:magnolia-responsive-dam:1.3.0'
// https://jarcasting.com/artifacts/org.sevensource.magnolia/magnolia-responsive-dam/
implementation ("org.sevensource.magnolia:magnolia-responsive-dam:1.3.0")
'org.sevensource.magnolia:magnolia-responsive-dam:jar:1.3.0'
<dependency org="org.sevensource.magnolia" name="magnolia-responsive-dam" rev="1.3.0">
  <artifact name="magnolia-responsive-dam" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.sevensource.magnolia', module='magnolia-responsive-dam', version='1.3.0')
)
libraryDependencies += "org.sevensource.magnolia" % "magnolia-responsive-dam" % "1.3.0"
[org.sevensource.magnolia/magnolia-responsive-dam "1.3.0"]

Dependencies

provided (7)

Group / Artifact Type Version
info.magnolia.imaging » magnolia-imaging jar
info.magnolia.dam » magnolia-dam-app jar 2.6.1
info.magnolia.ui » magnolia-ui-form jar
info.magnolia.ui » magnolia-ui-actionbar jar
info.magnolia.ui » magnolia-ui-dialog jar
info.magnolia.ui » magnolia-ui-mediaeditor jar
javax.servlet : javax.servlet-api jar 3.1.0

test (3)

Group / Artifact Type Version
junit : junit jar
org.assertj : assertj-core jar 3.8.0
org.sonarsource.java : sonar-jacoco-listeners jar 5.11.0.17289

Project Modules

There are no modules declared in this project.

GitHub Tag Maven Central License

magnolia-responsive-dam

Responsive images for Magnolia 5.5 to 6.1

This module provides:

  1. Two fields which allow content editors to specify multiple focus areas (i.e. cropping areas) of an image. The definable focus areas are specified by the means of aspect ratios (i.e. 16:9):

    • AspectAwareDamLinkField (replacing LinkField for referencing images in DAM assets app)
    • AspectAwareDamUploadField (replacing DamUploadField for storing images in website repository and also used by in the assets app itself).
  2. TemplatingFunctions to assist in generating the responsive HTML markup (i.e. srcset, etc.)

  3. An ImageOperationChain, which integrates into Magnolias imaging module to generate the image variations

Contributions welcome!

Compatibility

Magnolia version Responsive DAM version
5.5 0.9
5.6 1.0
6.0 1.1
6.1 1.2

Installation

The module is available on Maven central

<dependency>
  <groupId>org.sevensource.magnolia</groupId>
  <artifactId>magnolia-responsive-dam</artifactId>
  <version>x.x.x</version>
</dependency>

Upon module installation,

  • a contextAttribute (responsivedamfn) is installed into /modules/rendering/renderers/freemarker/contextAttributes
  • the ImageOperationChain is installed into /modules/imaging/config/generators/rd
  • a default config is installed into /modules/responsive-dam/config

Configuration

  • change /modules/dam-app/apps/assets/subApps/detail/editor/form/tabs/asset/fields/resource and add the following properties:
  class: org.sevensource.magnolia.responsivedam.field.upload.AspectAwareDamUploadFieldDefinition
  useExistingFocusAreas: true
  • in /modules/responsive-dam/config/variations, add a variation set, for example:
  hero-area:
    mobile:
      aspect: "4:3"
      constraints.minimumSize: 320w
      constraints.maximumSize: 576w
    default:
      aspect: "16:9"
      constraints.minimumSize: 576w
      constraints.maximumSize: 1600w
  • add a responsive-dam field to your component:
    • either an AspectAwareDamUploadField (equivalent to Magnolias DamUploadField)
      - name: heroimage
        label: ImageUpload
        binaryNodeName: heroimage
        variationSets: [hero-area]
        class: org.sevensource.magnolia.responsivedam.field.upload.AspectAwareDamUploadFieldDefinition
        editFileName: true
      
    • or an AspectAwareDamLinkField (equivalent to Magnolias LinkField) for storing the image in DAM
      - name: heroimagelink
        label: ImageLink
        variationSets: [hero-area]
        class: org.sevensource.magnolia.responsivedam.field.link.AspectAwareDamLinkFieldDefinition
        targetWorkspace: dam
        appName: assets
        aspectsAppName: "dam-app:uploadAndEdit"
        identifierToPathConverter:
        class: info.magnolia.dam.app.assets.field.translator.AssetCompositeIdKeyTranslator
        contentPreviewDefinition:
        contentPreviewClass: info.magnolia.dam.app.ui.field.DamFilePreviewComponent
      

Usage

After uploading an image, you will find an additional button to specify the required focus areas. In your template, you can use the provided ResponsiveDamTemplatingFunctions for rendering support:

[#assign imageNode = cmsfn.asJCRNode(content).getNode('heroimage') /]
<#-- use damfn.getAsset(content.imagelink).getNode() if the image is in DAM -->

[#assign variationMobile = responsivedamfn.getResponsiveVariation(imageNode, 'hero-area', 'mobile') /]
[#assign variationDefault = responsivedamfn.getResponsiveVariation(imageNode, 'hero-area', 'default') /]

[#assign mobileSrcSet = responsivedamfn.generateSrcSet(variationMobile.getRenditions()) /]
[#assign defaultSrcSet = responsivedamfn.generateSrcSet(variationDefault.getRenditions()) /]

<picture>
  <source media="(max-width: 575px)" srcset="${mobileSrcSet}">
  <img src="${variationDefault.getDefaultRendition().getLink()}" srcset="${defaultSrcSet}">
</picture>

Advanced Configuration

  • Image format mappings and their parameters are specified /modules/responsive-dam/config/outputFormatMappings. Each sourceMimeType can have multiple outputFormats (useful for example for webp support)
  • Next to the minimum and maximum size for each variation, you can specify the maximum number of renditions, that are generated and the minimum pixel difference between each rendition:
        default:
          aspect: "2:1"
          constraints.minimumSize: 800w
          constraints.maximumSize: 1600w
          constraints.maximumResolutions: 3
          constraints.minimumResolutionSizeStep: 200
    
    The defaults are specified in /modules/responsive-dam/config/defaultConstraint.
org.sevensource.magnolia

SevenSource

Versions

Version
1.3.0
1.2.1
1.2.0
1.1.3
1.1.2
1.1.1
1.1.0
1.0.1
1.0.0
0.9.2
0.9.1
0.9.0