Custom Multifield and Image in single dialog

I will ensure that the product team responds to this thread today. 

This article is helpful Scott thanks a ton.

So in my list of concerns with image tab approach that we are discussing, where we could have text and image, [1] adding tabs dynamically on the fly to create an image tab is something that will be a hurdle, cause the approach you've mentioned would be for fixed image tabs, right? Do we have any sample widget with us for dynamically creating image tabs on click of say "+" icon beside the image tab?

And question on the article is, Is there a way to avoid the text tab and have two text xtype in the tab with the droptarget area, now the reason being doing this would provide the user with a single tab for image title and description for the image, rather than the user switching between tabs for text and image?.

The requirement as proposed would be to have single tab with drop target and 2 xtype widgets, text and text area, in a single dialog, and these tabs generated on probably click of an icon.

I decided to try on the multifield approach looking at the complexity of the above approach, where i managed to create 2 fixed image tabs but couldn't manage to generate them on the fly and have a text and textarea widget in same tab. Seems like multifield helps alleviate the text and text area widgets and all the image paths and texts appear in a single dialog and single tab, but issue is placement of the droptarget for the image.

"I tried implementing this in another way, i.e, a custom image component with multiple image tabs but for that the concerns were

1. knowledge of extjs, to add a tab dynamically , say on click of "+", (+ being displayed to the right of image1, image2 tab). I couldn't handle the dynamic tab creation

i managed to add two image tabs though and could render successfully , but the image tabs would have to be fixed unless i add functionality to create tabs on the fly

2. Have title and text along with the image droptarget area on a single tab dialog , so that user drags drops the image, enters title text all in one tab for image1 of the carousel."

For this use case -- there are many nodes and properties that you have to set. Especially to hook into the Content Finder and support image drag and drop. I have created a KB article that walks you through how to create a CQ widget that uses a Dialog with tabs, hooks into the Content Finder, supports drag and drop of images as shown here:

[img]Content.png[/img] 

Follow this walk through and understand all the pieces the comes with CQ. Then you can extend it to use a carousel.

See: http://scottsdigitalcommunity.blogspot.ca/2013/08/creating-cq-widget-that-supports-image.html.

Thank you, appreciate your kind help.

smacdonald2008

 Hi smacdonald,

I initially used the multifield xtype, customized, wherein, i have a path field with magnifier icon to select the image from the dam.

As per requirement, my concern was  to replace the pathfield(magnifier icon) with a drop target smartimage xtype.

could give me solution how to acheive this?

            this.file = new CQ.html5.form.SmartFile({
                cls: "HCW-QuickFact-6",                
                fieldLabel : "Picture Link: ",
                            editable:false,
                            allowBlank : false,
                            anchor: '75%',
                            maxLength : 100,
                            cropParameter :"./image/imageCrop",
                            ddGroups : "media",
                            fileNameParameter : "./image/fileName",
                            fileReferenceParameter : "./image/fileReference",
                            mapParameter :"./image/imageMap",
                            rotateParameter : "./image/imageRotate",
                            name : "./image/file",
                            requestSuffix : "/image.img.png",
                            sizeLimit : "100",
                            autoUploadDelay : "1",
                            xtype: "html5smartimage",
                            listeners : {
                                change : {
                                    scope : this,
                                    fn : this.updateHidden
                                },

                                dialogclose : {
                                    scope : this,
                                    fn : this.updateHidden
                                }

                            }

                        });
            this.add(this.file);

I am unable to drag and drop image from content finder.

It sounds like the KB will address some of your requirements -- however - i passed this onto the AEM Product team. I am hoping to hear what they have to say.

That's great but wondering if we are on the same page and if it had the ability to drag drop multiple images and associate text for each image. Now this is for the custom carousel component that i was working on. I initially used the multifield xtype, customized, wherein, i have a path field with magnifier icon to select the image from the dam, a text xtype for the image title, and a textarea xtype for image description, on click of "+" icon i have another pathfield for Carousel image2, text xtype for image2 title and textarea xtype for image2 description, all appearing in a single tab in a dialog,. Now my concern was to replace the pathfield(magnifier icon) with a drop target smartimage xtype, and thus bon click of "+" we have a combination of smartimage xtype, text xtype and textarea xtype. The reason this is required is cause, one would like to have a droptarget area, to drag drop images from dam rather a pathfield, wherein the user would have to know the name of the image pre-hand without the ability to view it .

I tried implementing this in another way, i.e, a custom image component with multiple image tabs but for that the concerns were

1. knowledge of extjs, to add a tab dynamically , say on click of "+", (+ being displayed to the right of image1, image2 tab). I couldn't handle the dynamic tab creation

i managed to add two image tabs though and could render successfully , but the image tabs would have to be fixed unless i add functionality to create tabs on the fly

2. Have title and text along with the image droptarget area on a single tab dialog , so that user drags drops the image, enters title text all in one tab for image1 of the carousel.

Please let me know if we are on the same page.

I am going to put together a community article that talks about how to develop a CQ Component that can be dropped into a paragraph system and displays an image, rich text, and the path of a page in the system. The image must be editable by a content author and can be dragged-and-dropped from the Content Finder. The rich text must be editable by a content author, must allow for tables to be created and must have a default text that can be changed. It will use a Dialog Widget, (xtype of smartimage). Must be configured in the component's cq:editConfig to allow for dragging and-dropping of images from the Content Finder.

Yeah, was looking for an ability to have a title and a drop target area for dragging an image on click of "+" for a multifield. I tried adding an image node but in vain. I could do it for other xtypes but not smartimage.

Yeah  -- i have installed this package and I am digging through this too. I see what you mean here:

[img]Multifield.png[/img]

It looks like for you use case -- we will have to modify the multifield to include image functionality. I am seeing if someone within Adobe has an example of this or has done this as its not part of the documented examples.

Here is a Stackoverflow thread that may help here too:

http://stackoverflow.com/questions/16060295/adobe-cq-5-5-dialog-box-with-drag-drop-images-functionallity