The latest release of wcm.io Media Handler comes with some powerful new features.

Auto-Cropping

• Enable Auto-Cropping for a component by setting wcmio:mediaCropAuto=true on the component node

• When an image is dragged to an image component which requires a specific media format the image is cropped automatically by cutting off the parts that do not match

Manual cropping to Media Format ratios

• Automatic cropping can be overridden by manual cropping using the Image In-Place Editor of the component

• The list of cropping ratios is generated dynamically based on the media formats defined for the component - you do not have to define this for each component individually

• The allowed media formats have to be configured by setting wcmio:mediaFormats=[…] on the component node

• Due to restrictions of the AEM Image In-Place Editor the list of cropping ratios is only available in fullscreen mode, not in the inline mode.

Media Handler-aware Granite UI widgets

• The Media Handler now provides an enhances Version if the File Upload Granite UI Widget

• It automatically checks an asset against the list of expected media formats and displays a warning if the asset does not match

• The Button displays more information about the expected media formats. This is automatically generated as well.

• Additionally a path field is integrated below the File Upload field so you can alternatively browser for assets using a path browser instead of using the asset finder

• An enhanced version of the Path Field widget is provides as well which supports media format checking, e.g. for link dialogs

• See wcm.io Handler Granite UI components for details

Media Handler-aware Placeholder HTL template

• Similar to the enhanced File Upload widget an enhanced HTL Placeholder template is provides which checks against the associated media format and displays an error messages in the placeholder when the media format does not match

• It’s easy to use:

<sly data-sly-use.template="wcm-io/handler/media/components/placeholder/mediaPlaceholder.html"
    data-sly-call="${template.placeholder @ isEmpty=!media.valid, media=media.metadata}"></sly>

Component properties

All the new feature are powered by “component properties”, that means properties for media formats and auto cropping defined on the component node. See Usage for details.

For upcoming releases it’s planned to support Content Polices as alternative as well.

Try it out

Use wcm.io Maven Archetype AEM 2.1.2 to create a new test project with wcm.io Handler - it’s using all the features described above.