7 Replies Latest reply on Apr 10, 2013 2:08 AM by wu.shan

    Multiple smartimage widgets in a component dialog

    joel_triemstra Level 1

      Is there a way to have multiple smartimage widgets in a single dialog? Specifically I'm struggling with the requestSuffix parameter. Most of the other ones I can adapt to get the second widget to save its info to a different location from the first, but I can't see how to do that with requestSuffix. If the values are the same for both widgets, then once an image is selected, I see the same image in both tabs of the dialog. If I change it to something like /image2.img.png, it's no longer hitting the component as the resource. If I change it to .image2.img.png, the script handling this selector appears to break. I might be able to change that script, but that doesn't seem like it'll be a very flexible approach.

       

      Any other options? I'm in CQ 5.4 if that matters.

        • 1. Re: Multiple smartimage widgets in a component dialog
          Yogesh Upadhyay Level 4

          Joel,

           

          Good question. Using multiple image in a dialog is kind of complicated but can be done. But I am not sure how to use them in multifield (Love to here if some has done that using OOTB xtype). Here is example of using mutiple image in dialog

           

          <items jcr:primaryType="cq:WidgetCollection">

                  <tab1

                      jcr:primaryType="cq:Widget"

                      title="Settings"

                      xtype="panel">

                      <items jcr:primaryType="cq:WidgetCollection">

                          <resType1

                              jcr:primaryType="cq:Widget"

                              ignoreData="{Boolean}true"

                              name="./image1/sling:resourceType"

                              value="foundation/components/image"

                              xtype="hidden"/>

                          <resType2

                              jcr:primaryType="cq:Widget"

                              ignoreData="{Boolean}true"

                              name="./image2/sling:resourceType"

                              value="foundation/components/image"

                              xtype="hidden"/>

          </tab1>

           

          <tab2

                      jcr:primaryType="cq:Widget"

                      cropParameter="./image1/imageCrop"

                      ddGroups="[media]"

                      fileNameParameter="./image1/fileName"

                      fileReferenceParameter="./image1/fileReference"

                      mapParameter="./image1/imageMap"

                      name="./image1/file"

                      requestSuffix="/image1.img.png"

                      rotateParameter="./image1/imageRotate"

                      sizeLimit="100"

                      title="Frame Image"

                      xtype="html5smartimage"/>

                  <tab3

                      jcr:primaryType="cq:Widget"

                      cropParameter="./image2/imageCrop"

                      ddGroups="[media]"

                      fileNameParameter="./image2/fileName"

                      fileReferenceParameter="./image2/fileReference"

                      mapParameter="./image2/imageMap"

                      name="./image2/file"

                      requestSuffix="/image2.img.png"

                      rotateParameter="./image2/imageRotate"

                      sizeLimit="100"

                      title="Lightbox Image"

                      xtype="html5smartimage"/>

           

          And then edit config drop target something like this,

           

          <cq:dropTargets jcr:primaryType="nt:unstructured">

                  <image

                      jcr:primaryType="cq:DropTargetConfig"

                      accept="[image/.*]"

                      groups="[media]"

                      propertyName="./image1/fileReference">

                      <parameters

                          jcr:primaryType="nt:unstructured"

                          sling:resourceType="foundation/components/image"

                          imgAlignment="left">

                          <image2

                              jcr:primaryType="nt:unstructured"

                              sling:resourceType="foundation/components/image"

                              imageCrop=""

                              imageMap=""

                              imageRotate=""/>

                          <image1

                              jcr:primaryType="nt:unstructured"

                              sling:resourceType="foundation/components/image"

                              imageCrop=""

                              imageMap=""

                              imageRotate=""/>

                      </parameters>

                  </image>

              </cq:dropTargets>

           

           

          Yogesh

          • 2. Re: Multiple smartimage widgets in a component dialog
            joel_triemstra Level 1

            Wow, thanks, that's a lot to digest. I tried implementing this structure for just one image to make sure I had that right. I can successfully add an image to the widget and save it, but when I try to view it again, I get a 404 on image1.img.png. I've got a lot in this to experiment with, but if there's something you can think of that would cause that, it'd be great to hear.

             

            Also, I don't think I have the html5smartimage available, since I'm in 5.4, if that matters.

            • 3. Re: Multiple smartimage widgets in a component dialog
              Yogesh Upadhyay Level 4

              but when I try to view it again, I get a 404 on image1.img.png

               

              -- Where are you trying to view it ? By opening your dialog again or in your script ? You have to make sure that you add those hidden type for this to work.

               

              I don't think I have the html5smartimage available, since I'm in 5.4, if that matters

               

              -- That should not matter. You can use available xtype for CQ5.4

               

              Can you send your dialog.xml and _edit_config.xml ?

               

              Yogesh

              • 4. Re: Multiple smartimage widgets in a component dialog
                joel_triemstra Level 1

                I was trying by opening the dialog again. I did end up finding that I had the ignoreData value wrong in the hidden type. When I updated that, I got the dialog to open again successfully, but I see a JS error that says "selection is null" in

                widgets.js, with the line "context.doc.execCmd("useCSS", true);" The dialog appears to function, though, so it may not be a high priority. This is my XML

                 

                <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

                    jcr:primaryType="cq:Dialog"

                    title="Offer"

                    xtype="dialog">

                    <items jcr:primaryType="cq:TabPanel">

                        <items jcr:primaryType="cq:WidgetCollection">

                            <tab1

                                jcr:primaryType="cq:Panel"

                                title="Copy Snippets">

                                <items jcr:primaryType="cq:WidgetCollection">

                                    <offerCode

                                        jcr:primaryType="cq:Widget"

                                        fieldLabel="Offer Code: "

                                        name="./offerCode"

                                        xtype="textfield"/>

                                    <dropdownCopy

                                        jcr:primaryType="cq:Widget"

                                        fieldLabel="Copy in drop-down list: "

                                        name="./dropdownCopy"

                                        xtype="textfield"/>

                                    <listPageCopy

                                        jcr:primaryType="cq:Widget"

                                        hideLabel="{Boolean}true"

                                        name="./listPageCopy"

                                        xtype="richtext">

                                        <rtePlugins jcr:primaryType="nt:unstructured">

                                            <misctools

                                                jcr:primaryType="nt:unstructured"

                                                features="*"/>

                                        </rtePlugins>

                                    </listPageCopy>

                                    <congratulationsCopy

                                        jcr:primaryType="cq:Widget"

                                        fieldLabel="Congratulations Copy"

                                        name="./congratulationsCopy"

                                        xtype="textfield"/>

                                </items>

                            </tab1>

                            <image1

                                jcr:primaryType="cq:Widget"

                                cropParameter="./image1/imageCrop"

                                ddGroups="[media]"

                                fileNameParameter="./image1/fileName"

                                fileReferenceParameter="./image1/fileReference"

                                mapParameter="./image1/imageMap"

                                name="./image1/file"

                                requestSuffix="/image1.img.png"

                                rotateParameter="./image1/imageRotate"

                                title="Image"

                                uploadUrl="/tmp/upload/*"

                                xtype="smartimage"/>

                            <hidden

                                jcr:primaryType="cq:Widget"

                                title="Settings"

                                xtype="panel">

                                <items jcr:primaryType="cq:WidgetCollection">

                                    <resType1

                                        jcr:primaryType="cq:Widget"

                                        ignoreData="{Boolean}true"

                                        name="./image1/sling:resourceType"

                                        value="foundation/components/image"

                                        xtype="hidden"/>

                                </items>

                            </hidden>

                        </items>

                    </items>

                </jcr:root>

                 

                <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

                    jcr:primaryType="cq:EditConfig">

                    <cq:dropTargets jcr:primaryType="nt:unstructured">

                        <image

                            jcr:primaryType="cq:DropTargetConfig"

                            accept="[image/.*]"

                            groups="[media]"

                            propertyName="./image1/fileReference">

                            <parameters

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="foundation/components/image"

                                imgAlignment="left">

                                <image1

                                    jcr:primaryType="nt:unstructured"

                                    sling:resourceType="foundation/components/image"

                                    imageCrop=""

                                    imageMap=""

                                    imageRotate=""/>

                            </parameters>

                        </image>

                    </cq:dropTargets>

                </jcr:root>


                • 5. Re: Multiple smartimage widgets in a component dialog
                  Yogesh Upadhyay Level 4

                  Is this complete dialog.xml ? From your dialog.xml it does not looks like you are using multiple images. If you are using only one image in your dialog.xml then you do not have to do any additonal configuration. See example of textImage component in CQ to set up dialog with just one image.

                   

                  Yogesh

                  • 6. Re: Multiple smartimage widgets in a component dialog
                    joel_triemstra Level 1

                    At the time I posted it, yes, it was the complete XML. Since this configuration was a little different than the image component that I was originally copying from, I wanted to make sure I could get it working with just 1 image before I set all the properties for the 2nd image.

                    • 7. Re: Multiple smartimage widgets in a component dialog
                      wu.shan

                      it does't work under Version 5.5.0 20120220 Service Pack 2. Has anyone idee?

                       

                      thanks,

                       

                      shan