Classic UI to Touch UI Migration: html5smartimage replacement | Community
Skip to main content
Level 3
April 19, 2023
Solved

Classic UI to Touch UI Migration: html5smartimage replacement

  • April 19, 2023
  • 1 reply
  • 4165 views

Hey all,

 

During our migration from Classic UI to Touch UI, we're creating Touch UI dialogs and interfaces for all our components. Many of our Classic UI components made use of the "html5smartimage" ExtJS xtype to accept image input from the DAM and give authors the ability to set and change cropping within the dialog, on the page. An equivalent component does not appear to exist in the Touch UI suite of tools (Coral 2, Coral 3, CCL), nor does it seem to have a one-to-one replacement.

 

From my research so far:

1. Many external blogs and posts suggest the use of the "fileupload" from the cq library with various settings adjusted, but this does not meet our needs (listed below)

2. I also found suggestions to make use of the Core Components Image component - However, we need to be able to crop and adjust the image in the properties dialogs, so the inplaceediting of the Image component cant be used there.

3. This poor soul was never answered.

 

Our needs are:
1. Users should be able to supply images from the DAM to the input field
2. Users should be able to crop images in-place without modifying the original DAM image, saving the modifications to the page
3. Users should NOT be able to upload images directly from their computer

 

As a stand-in to allow for the use of DAM images, we're currently making use of the pathfield (granite/ui/components/coral/foundation/form/pathfield) to accept a DAM image for use on the page, but in any cases where a pre-existing component made use of an image customization, the customizations are lost and not displayed on the component.

 

What is the best solution for this? Is there a way to modify the "cq/gui/components/authoring/dialog/fileupload" field to meet these needs, or is there a different solution that others have used for this? I'm at a loss.

 

I've also got a Day Care support ticket open for this... but the community forum was faster than support last time, so here I am again.

 

Thank you all for your time!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by JaredAtUD

I have a sample code here, which is used core component as base component

https://github.com/arunpatidar02/aemaacs-aemlab/tree/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/components/image 


Looks like I've got things working.

 

So, based on the sample code you provided above:


@arunpatidar wrote:

...Combined with making use of inline editing, I'm now able to crop the image within the page.

 

While this doesn't meet all our preferences, I'm pretty sure we can make this work.

 

Thank you for your time! I'm going to mark this as answered.

1 reply

JaredAtUDAuthor
Level 3
April 19, 2023

With the functionality you linked I was able to implement the fileupload with at least two of our requirements:

1. It is working inside of the dialog

2. I was able to disable uploading from the local PC, only allowing DAM content

 

However, I am unable to see any edit/cropping features available in the dialog. I've been attempting to get this working based on the Image V3 documentation without luck.

 

Thanks again.

arunpatidar
Community Advisor
Community Advisor
April 20, 2023

The cropping works in inline mode.

 

Arun Patidar