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.
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.