Expand my Community achievements bar.

SOLVED

Cannot get image to appear in dialog

Avatar

Level 6

 Hi I have the following dialog where I have 4 tabs. 2 tabs have images.

 

Tab1 , when an image is dropped into it, In the dialog the dropped image image still shows. I also do this with Tab3. I close the dialog and reopen it. There is now no image in the dialog tab "tab1". However the image I dropped in Tab3 is visible.

 

However in both tab1 and tab 3 there is an icon "!" for image info, in Tab1 if selected it shows a link to the image I dropped into it, the same for tab3.

In my jsp page I can get the Tab1 image using the following code

image = new Image(resource, "replacementimage");

and

image2 = new Image(resource, "mobileimage");

If I change

"requestSuffix": "/replacementimage.img.png", in tab1 to

"requestSuffix": "/mobileimage.img.png",

Then as I expected in the dialog tab 1 shows tab3 image.

 

I was planning use 6 different tab images. I had exactly the same problem on every other dialog tab image than tab3 image.

 

I think the error lies with my requestsuffix. Please can someone help. Below is my dialog

{
    "jcr:primaryType": "cq:TabPanel",
    "helpPath": "en/cq/current/wcm/default_components.html#Text Image",
    "xtype": "tabpanel",
    "activeTab": "0",
    "items": {
        "jcr:primaryType": "cq:WidgetCollection",
        "tab1": {
            "jcr:primaryType": "cq:Widget",
            "fileReferenceParameter": "./replacementimage/fileReference",
            "rotateParameter": "./replacementimage/imageRotate",
            "ddGroups": [
                "media"
            ],
            "fileNameParameter": "./replacementimage/fileName",
            "name": "./replacementimage/file",
            "cropParameter": "./replacementimage/imageCrop",
            "title": "Replacement Image",
            "xtype": "html5smartimage",
            "sizeLimit": "100",
            "requestSuffix": "/replacementimage.img.png",   <<<<<<HERE IS THE ISSUE>>> Cannot see image in dialog
            "mapParameter": "./replacementimage/imageMap"
        },
        "tab2": {
            "jcr:primaryType": "cq:Widget",
            "title": "Image Properties",
            "xtype": "panel",
            "items": {
                "jcr:primaryType": "cq:WidgetCollection",
                "resType": {
                    "jcr:primaryType": "cq:Widget",
                    "name": "./image/sling:resourceType",
                    "value": "foundation/components/image",
                    "xtype": "hidden",
                    "ignoreData": true
                },
                "actionTitle": {
                    "jcr:primaryType": "cq:Widget",
                    "name": "./replacementimage/jcr:actionTitle",
                    "xtype": "textfield",
                    "fieldLabel": "Button Title:"
                },
                "linkURL": {
                    "jcr:primaryType": "cq:Widget",
                    "name": "./linkReplacementURL",
                    "xtype": "pathfield",
                    "fieldLabel": "Link to:",
                    "fieldDescription": "Drop files or pages from the Content Finder"
                }
            }
        },
        "tab3": {
            "jcr:primaryType": "cq:Widget",
            "fileReferenceParameter": "./mobileimage/fileReference",
            "rotateParameter": "./mobileimage/imageRotate",
            "ddGroups": [
                "media"
            ],
            "fileNameParameter": "./mobileimage/fileName",
            "name": "./mobileimage/file",
            "cropParameter": "./mobileimage/imageCrop",
            "title": "Mobile Image",
            "xtype": "html5smartimage",
            "sizeLimit": "100",
            "requestSuffix": "/mobileimage.img.png",  <<<THIS WORKS>>>
            "mapParameter": "./mobileimage/imageMap"
        },
        "tab4": {
            "jcr:primaryType": "cq:Widget",
            "title": "Image Properties",
            "xtype": "panel",
            "items": {
                "jcr:primaryType": "cq:WidgetCollection",
                "alt": {
                    "jcr:primaryType": "cq:Widget",
                    "name": "./mobileimage/alt",
                    "xtype": "textfield",
                    "fieldLabel": "Alt Text:",
                    "fieldDescription": "(leave empty to use the title defined above)"
                },
                "size": {
                    "jcr:primaryType": "cq:Widget",
                    "heightParameter": "./mobileimage/height",
                    "xtype": "sizefield",
                    "fieldLabel": "Size:",
                    "widthParameter": "./mobileimage/width"
                },
                "resType": {
                    "jcr:primaryType": "cq:Widget",
                    "name": "./mobileimage/sling:resourceType",
                    "value": "foundation/components/image",
                    "xtype": "hidden",
                    "ignoreData": true
                }
            }
        }
    }
}

 

Kind Regards

Clive Stewart

1 Accepted Solution

Avatar

Correct answer by
Level 6

I solved the problem.

 I added the widget to my dialog

{
    "jcr:primaryType": "cq:Widget",
    "name": "./replacementimage/sling:resourceType",
    "value": "foundation/components/image",
    "xtype": "hidden",
    "ignoreData": true
}

View solution in original post

1 Reply

Avatar

Correct answer by
Level 6

I solved the problem.

 I added the widget to my dialog

{
    "jcr:primaryType": "cq:Widget",
    "name": "./replacementimage/sling:resourceType",
    "value": "foundation/components/image",
    "xtype": "hidden",
    "ignoreData": true
}