Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

How to Add Image Management to an AEM TouchUI Dialog: Tutorial | AEM Community Blog Seeding

Avatar

Administrator

BlogImage.jpg

How to Add Image Management to an AEM TouchUI Dialog: Tutorial by Exadel

Abstract

Hi guys! It’s been a long summer. We hope you enjoyed it despite the pandemic – had some rest, maybe travelled to fancy places and took some good photos.

Speaking of photos, hardly any website can do without images nowadays, and we as AEM developers work every day building image-rich web experiences. Many of the components we create have the “insert/upload” option for AEM images in Touch UI. There are multi-image components in AEM sites that offer multiple image slots for desktop, tablet, and mobile views. A Touch UI dialog must support basic image management, including picking from a file system, drag-and-drop, a preview box, and a clear button.

These options have always been present in AEM image widgets. However, there has always been a fly in the ointment. In Classic UI, we had the Html5SmartImage dialog component. Setting it up wasn’t easy. To provide a better image uploading experience, you had to supplement it with hidden fields and use custom client libraries. There was also an issue with placing several Html5SmartImage-s in one dialog tab.

Things got better with the introduction of Touch UI dialogs. Adobe’s stock component libraries, Coral 2 and Coral 3, offer some advanced tools for Touch UI image uploading and drag-and-drop. But the API remains somewhat sophisticated, there are many setup options, and they’re still difficult to work with.

We struggled before we added the image management facility in the Exadel Authoring Kit — part of Exadel Toolbox. Now it has a variety of tools to make image management in Touch UI dialogs much simpler.

The Options
To start with, there are at least three (probably more) different AEM components that deal with images.

First, we’ve got the FileUpload component, which belongs to the Coral 2 library. As you can assume from the name, it can be used to upload images. The widget comes bundled with image drag-and-drop, preview, and a clear button.

Read Full Blog

How to Add Image Management to an AEM TouchUI Dialog: Tutorial

Q&A

Please use this thread to ask the related questions.



Kautuk Sahni
0 Replies