AEM CQ 561 - Slide Show Component

Goal


Download package install for creating a simple slide show component. For Touch UI check this post

This component uses multi-image widget discussed here

The multi-image widget script was enhanced to support additional textfields, textareas etc. In the slide show created we add a textfield for title and textarea for description overlayed on image displayed

Add images using drag and drop from content finder, as the upload functionality in image widget has a bug yet to be fixed

Thank you David Gonzalez, Justin Edelson for ideas in developing this show...

Please leave a comment if you find bugs


Bug Fixes

Tested on AEM 6 SP2 Classic UI - Fix for Unable to drop images after removing existing multifield item (workaround was - after removing item, ok the dialog and reopen it to add new items)

Demo of Remove | Package Install

Tested with AEM 61 Classic UI - Add Item should appear at the end (after last multifield item) so that user doesn't need to scroll to the beginning of multifield for adding a new multifield item

Demo | Package Install


Single Image in Multifield item


Check Demo for single image in multifield item

 Dialog

As xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    activeTab="{Long}0"
    title="Slideshow Images"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <basic
            jcr:primaryType="cq:Widget"
            title="Images"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <images
                    jcr:primaryType="cq:Widget"
                    border="false"
                    name="./images"
                    xtype="imagemultifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        border="false"
                        layout="form"
                        xtype="imagemultifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <title
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Title Text"
                                name="./titleText"
                                width="250px"
                                xtype="textfield"/>
                            <description
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Description Text"
                                name="./descText"
                                width="250px"
                                xtype="textarea"/>
                            <image
                                jcr:primaryType="cq:Widget"
                                cropParameter="./imageCrop"
                                ddGroups="[media]"
                                fieldLabel="Image"
                                fileNameParameter="./fileName"
                                fileReferenceParameter="./fileReference"
                                height="250"
                                imageSlingResourceType="foundation/components/parbase"
                                mapParameter="./imageMap"
                                name="./image"
                                rotateParameter="./imageRotate"
                                sizeLimit="100"
                                xtype="imagemultifieldsmartimage"/>
                        </items>
                    </fieldConfig>
                </images>
            </items>
        </basic>
    </items>
</jcr:root>


Dialog on Page




The Component instance in CRXDE



Slideshow




Multiple Images in Multifield item


Check Demo for multiple images in a single multifield item

Dialog

As xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    activeTab="{Long}0"
    title="Slideshow Images"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <basic
            jcr:primaryType="cq:Widget"
            title="Images"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <images
                    jcr:primaryType="cq:Widget"
                    border="false"
                    name="./images"
                    xtype="imagemultifield">
                    <fieldConfig
                        jcr:primaryType="cq:Widget"
                        border="false"
                        layout="form"
                        xtype="imagemultifieldpanel">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <title
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Title Text"
                                name="./titleText"
                                width="250px"
                                xtype="textfield"/>
                            <description
                                jcr:primaryType="cq:Widget"
                                fieldLabel="Description Text"
                                name="./descText"
                                width="250px"
                                xtype="textarea"/>
                            <first
                                jcr:primaryType="cq:Widget"
                                cropParameter="./imageCrop"
                                ddGroups="[media]"
                                fieldLabel="First Image"
                                fileNameParameter="./fileName"
                                fileReferenceParameter="./fileReference"
                                height="250"
                                imageSlingResourceType="foundation/components/parbase"
                                mapParameter="./imageMap"
                                name="./first"
                                rotateParameter="./imageRotate"
                                sizeLimit="100"
                                xtype="imagemultifieldsmartimage"/>
                            <second
                                jcr:primaryType="cq:Widget"
                                cropParameter="./imageCrop"
                                ddGroups="[media]"
                                fieldLabel="Second Image"
                                fileNameParameter="./fileName"
                                fileReferenceParameter="./fileReference"
                                height="250"
                                imageSlingResourceType="foundation/components/parbase"
                                mapParameter="./imageMap"
                                name="./second"
                                rotateParameter="./imageRotate"
                                sizeLimit="100"
                                xtype="imagemultifieldsmartimage"/>
                        </items>
                    </fieldConfig>
                </images>
            </items>
        </basic>
    </items>
</jcr:root>


Dialog on page




Slideshow









Posted by at

57 comments:

  1. KOApril 23, 2014 at 11:10 PM

    hi sreekanth

    Many many thanks for your effort. But I found that there is some problem with the component. I had managed to install the package successfully, but when I drag the component to a page, the component could only save the image value to JCR. The "Text" and "Title" field could not be saved.

    Do you know what may cause this problem?

    Thanks for your help

    ReplyDelete
  2. sreekanth choudryApril 24, 2014 at 8:29 AM

    Hello KO, are you saying the Title text field value is not saved when the component is added using drag and drop? or it doesnt save the value of the text field always? can you check the browser console to see if the request to CRX includes value of the text field entered

    ReplyDelete
  3. KOApril 26, 2014 at 9:40 AM

    Hi sreekanth, the title text field and desciption text doesn't save the value always. I check the browser console and I see that when I click on Save. The post request does include the text field value. Below is the value in the POST request

    /descText bb
    ./descText cc
    ./images/image-1/fileRefe... /content/dam/web/bochk/landing/Screen Shot 2014-04-15 at 2.00.48 pm.png
    ./images/image-1/imageCro...
    ./images/image-1/imageMap
    ./images/image-1/imageRot... 0
    ./images/image-2/fileRefe... /content/dam/web/bochk/banners/Level3_01.1_Free Property Valuation_banner_300x200.jpg
    ./images/image-2/imageCro...
    ./images/image-2/imageMap
    ./images/image-2/imageRot... 0
    ./images/jcr:lastModified
    ./images/jcr:lastModified
    ./images/jcr:lastModified...
    ./images/jcr:lastModified...
    ./images/order ["image-1","image-2"]
    ./images@Delete
    ./jcr:lastModified
    ./jcr:lastModifiedBy
    ./sling:resourceType bochk_web/components/simple-slideshow
    ./titleText aa
    ./titleText dd
    :cq:undoblobs update:/content/web/bochk/desktop/zh_hk/navmenu1/level2/subpage-inner-singlecolumn-contentbody/jcr:content/par/simple_slideshow/./images/image-1/images/image-1
    :cq:undoblobs update:/content/web/bochk/desktop/zh_hk/navmenu1/level2/subpage-inner-singlecolumn-contentbody/jcr:content/par/simple_slideshow/./images/image-2/images/image-2
    :status browser
    _charset_ utf-8

    What possibly went wrong?

    Thanks



    ReplyDelete
  4. KOApril 26, 2014 at 10:30 AM

    By the way, I am currently using CQ5.5 SP2.1. Does the component works fine on CQ5.5 SP2.1

    Thanks

    ReplyDelete
    Replies
    1. sreekanth choudryApril 28, 2014 at 9:32 AM

      hello KO, i've never tested it on 5.5, but the titleText, descText should go as ./images/image-1/titleText etc. specific to that image.. debug ExperienceAEM.ImageMultiField.Panel.initComponent of html5-smart-image-multi-field.js to see whats wrong with paths

      Delete
  5. abhiJune 26, 2014 at 8:46 AM

    Sreekanth, Could you please update how to fix the image upload bug for this slide show component...thanx in advace :)

    ReplyDelete
    Replies
    1. sreekanth choudryJuly 14, 2014 at 6:25 PM

      Hello Abhi, you have to add a fix in onFileSelected function override of CQ.html5.form.SmartImage.. i'll try to find some time and fix it this week

      Delete
    2. VYGA.PROAugust 20, 2014 at 5:09 AM

      That would be great! :)

      Delete
  6. ServerJuly 14, 2014 at 3:45 AM

    When we are re-opening the dialog, its not showing the text, while text is getting stored on the component level in /content. what do we have to do for this? TIA.

    ReplyDelete
    Replies
    1. sreekanth choudryJuly 14, 2014 at 6:26 PM

      hello Ankit, can you give the exact path in CRX where text is stored starting with /content

      Delete
  7. Jonas MagdalenoAugust 8, 2014 at 5:35 AM

    Hi Sreekanth,
    I have two questions...
    - In cq5.4 CQ.html5.form.SmartImage is not define, should it works changing it for CQ.form.SmartImage?
    - Any update on the onFileSelected function override?

    Thanks!

    ReplyDelete
  8. AshwinAugust 27, 2014 at 1:43 AM

    Hi,

    Any update on the onFileSelected function override. I am using this example to develop one of my requiremets and is currently stuck as I am not able to drop images from my desktop. Any quick help would be much appreciated. Thanks in advance...

    Ashwin

    ReplyDelete
  9. UnknownSeptember 15, 2014 at 3:00 PM

    Hi Sreekanth
    I am facing an issue while dragging and dropping an image, For the first time the component functions correctly, but when I edit it again and tries to delete the existing item and add a new item, for this new item the drag and drop functionality is not working. Can you help me out in fixing it. Really appreciate your help.

    Thanks.

    ReplyDelete
  10. AnonymousNovember 10, 2014 at 11:53 AM

    hi,

    In which way might be positioned at the bottom the label "Add item"?

    ReplyDelete
  11. gourav makhijaFebruary 21, 2015 at 8:31 PM

    Hi Sreekant,

    I am also facing problem, once I click on cancel button and then open dialog then unable to drop image in panel. Any update will be great help for us.

    Note: I have also notice that when I open dialog second time then browser is continuously doing some process in background while in another dialog case it never happen.

    Regards
    Gourav Mukhija

    ReplyDelete
  12. gourav makhijaFebruary 25, 2015 at 9:33 AM

    Hi Sreekant,

    I have made following changes in reorder function - else condition
    else{
    var tempValue = this.field.getValue();
                 this.field.setValue(item.field.getValue());
                 item.field.setValue(tempValue);
    }

    Image drag up and down move issue get resolve but still m facing another issue in remove handler.
    Problem: Once I remove any image and add image from content finder then unable to drop image.
    Note:If I make multifield.dropTargets blank in debugging then drop work otherwise dom reference is not there because of invalid drop.

    Any help would be great.

    Regards
    Gourav Mukhija

    ReplyDelete
    Replies
    1. sreekanth choudryFebruary 25, 2015 at 10:06 AM

      hey Gourav, sorry i am kinda swamped with my project work.... i'll try to investigate (remove any image and add image from content finder then unable to drop image)

      Delete
    2. sreekanth choudryFebruary 25, 2015 at 12:50 PM

      Gourav, added a fix in html5-smart-image-multifield.js #285 (resetDropTargets()), Package Install - https://drive.google.com/file/d/0B4d6KmbLkAumcU4ybFJORklIMWM/view?usp=sharing

      Delete
    3. gourav makhijaFebruary 25, 2015 at 10:31 PM

      Thankxx a lot Sreekanth, You rock :) . Everything is working fine.

      Delete
    4. gourav makhijaMarch 1, 2015 at 12:40 AM

      Hi sreekanth,

      One more defact I have seen below code resolve image reordering issue, but when I click multi time either up or down arrow to reorder component then again unable to drop image there because droptarget array become empty there.

      else{
      var tempValue = this.field.getValue();
      this.field.setValue(item.field.getValue());
      item.field.setValue(tempValue);
      }

      Regards
      Gourav M

      Delete
    5. UnknownMarch 2, 2015 at 4:19 AM

      Hi Sreekanth,

      Actually, The old issue has been fixed after using your new package. But a regression issue has arrived wherein user is not able to drag an drop new image after changing the order of the item. e.g. User is not able to replace old image with new one at first position when he takes the second image to the first position.

      Thanks,
      Ashwani Sahni

      Delete
    6. sreekanth choudryMarch 4, 2015 at 11:22 AM

      hello Ashwani, debugging furthur, its strange multifield fires remove on the moved item first before actually moving the item; modified the logic #284 and listening on "removeditem" instead.... let me know how it goes https://drive.google.com/file/d/0B4d6KmbLkAumSXpzNTYwM1RaTWs/view?usp=sharing

      Delete
    7. gourav makhijaMarch 9, 2015 at 12:18 AM

      Hello Sreekanth/Ashwani ..... I have made small change in js file and now everything work perfectly.

      dialog.on('beforeshow', function(){
      this.dropTargets = [];
      },this);

      Issue resolved: earlier after changing the order & then clicking on cancel button user unable to drag/drop image.

      Regards
      Gourav M

      Delete
  13. gourav makhijaMarch 1, 2015 at 12:38 AM

    This comment has been removed by the author.

    ReplyDelete
  14. RamMay 6, 2015 at 2:35 AM

    Hi Sreekanth, Great work.

    I am trying to get fileReference of the images to display in the page. But somehow the fileReference doesn't show up in properties object when I try to print it. I am trying to display the images using sightly. please explain me how to display the image reference in sightly.

    ReplyDelete
  15. AnonymousMay 20, 2015 at 4:06 AM

    Hi,

    really great work on this component.

    Just wondering if there is a way to make it show the cropped image when you first open the dialog, the way the normal smart image component does - currently its not obvious that the image has been cropped until you click the crop tool so it shows the overlay.

    Thanks

    Martin

    ReplyDelete
  16. Prabhu ShankarJune 26, 2015 at 1:40 AM

    HI Sreekant ,
    Great Work . The slideshow component works perfectly . But when i add a dropdown inside 'imagemultifield' xtype , it does not save the value from dropdown in CRX . Other than dropdown , the value from other xtypes are saved in CRX . Is there any changes to be made for dropdown to work ?

    Thanks ,
    Prabhu

    ReplyDelete
    Replies
    1. sreekanth choudryJune 26, 2015 at 9:19 AM

      hi Prabhu, can you upload dialog xml and paste the url here....

      Delete
  17. UnknownJuly 14, 2015 at 4:12 PM

    This comment has been removed by the author.

    ReplyDelete
  18. UnknownJuly 14, 2015 at 4:14 PM

    Hi Sreekant,

    I have installed the package and it works fine on my local. The only thing missing is the mobile responsiveness. Is it doable?

    Thanks,
    Guo

    ReplyDelete
    Replies
    1. sreekanth choudryJuly 15, 2015 at 11:22 AM

      hi Guo, can you elaborate? for responsive/adaptive images i think you need dynamic media of aem 60/61

      Delete
  19. UnknownJuly 18, 2015 at 5:40 AM

    Hi Sreekant,

    When I am creating a checkbox (type = select, xtype = selection) under fieldConfig(xtype=imagemultifieldpanel), its not working showing a dropdown in dialog.
    And also when I am calling a listner under that checkbox, its not working too. Do you have any idea of this issue ?

    Regards,
    Ashish Jain

    ReplyDelete
    Replies
    1. sreekanth choudryJuly 20, 2015 at 10:13 AM

      hi Ashish, can you upload and share the dialog xml?

      Delete
    2. UnknownJuly 21, 2015 at 1:07 AM

      I am not able to upload xml here.. giving some error. can you share your email id.. i'll mail it to you

      Delete
    3. sreekanth choudryJuly 21, 2015 at 3:33 PM

      upload it to google drive or dropbox, post the url here or if you prefer email experience.aem@gmail.com

      Delete
    4. UnknownJuly 22, 2015 at 2:21 AM

      Yes I mailed you the XML file.

      Delete
    5. SambasivarajaAugust 7, 2015 at 1:57 AM

      Hi Sreekanth,

      Am also facing the same problem.Check Box value is not saving .Do u find any solution.

      Delete
  20. SambasivarajaAugust 4, 2015 at 6:11 AM

    Hi ,

    Is there anyway to place the "Add Item" below each section.Please provide your valuable suggestion

    ReplyDelete
    Replies
    1. sreekanth choudryAugust 4, 2015 at 5:42 PM

      hi, check the bugfixes section above...."Add Item" now appears after the last multifield item (or are you trying to put "Add Item" after every multifield item? )

      Delete
    2. SambasivarajaAugust 5, 2015 at 11:08 PM

      Thanks :) It works fine after installing your bug fix package.

      Delete
  21. UnknownAugust 7, 2015 at 7:15 AM

    Hi Sreekanth, is there a way fo producing JSON format data in String[] array like we have for all your other multi-widget designs like richtext multi widget ? Instead of nodes, I will need to have one String{} array with each element as a JSON. Within each JSON may be a subset with image properties as a JSON. Is it possible that you help me with such a package ? One image, one text, one checkbox per set should be great. We are in the middle of a design phase for our project and this looks to be a good design for our consideration. Please help !

    Regards,
    Somnath.

    ReplyDelete
    Replies
    1. sreekanth choudryAugust 7, 2015 at 8:17 AM

      Somnath, i am occupied with project work and may not be able to get to it soon....

      Delete
    2. UnknownAugust 7, 2015 at 9:49 AM

      Ok absolutely fine, please take your time and meet your priorities. I will be waiting to have a fixed version of this in JSON from you :-).

      Delete
    3. UnknownAugust 7, 2015 at 10:30 AM

      With full respect to all the priorities you have, if at all possible, it will be great to have a quick fix on this with the dialog drag-n-drop needing page refresh everytime. JSON format will be great to have, but unfortunately without this drag drop fix, the component is becoming not usable, AEM 6.0.

      Delete
    4. UnknownAugust 7, 2015 at 11:54 AM

      This comment has been removed by the author.

      Delete
  22. UnknownAugust 7, 2015 at 11:55 AM

    For the AEM 6.1 Bug Fix package if you can just give me some advise on where to fix, I can try doing so in the JS files. If that works out.

    ReplyDelete
    Replies
    1. UnknownAugust 7, 2015 at 1:31 PM

      Yes, its not just image, any change on the dialog cannot be performed without a page refresh. If I do so, then entire saved entry is lost. - Needs a fix to this for sure whenever you find some time. The same applies for image in multi-widget article package.

      Delete
  23. 1August 20, 2015 at 10:38 PM

    Hi Sreekanth,

    The images are not getting displayed when the author clicks on 'OK' of the dialog and thereafter opens the dialog again.Workaround is to click on 'Cancel' of the dialog and open the dialog again. What could be the issue.

    ReplyDelete
  24. AnonymousJuly 13, 2016 at 2:23 AM

    Today, responsive design is essential thing for website design and if you don’t prepare responsive website design for your site than you lose various users for your site that come from various device like mobile user, iPod user, etc.

    Cado Magenge
    Responsive Web Design Company Melbourne
    iPhone Application Development Melbourne
    Web Design and Development Company

    ReplyDelete
  25. UnknownAugust 5, 2016 at 10:31 AM

    This comment has been removed by the author.

    ReplyDelete
  26. UnknownAugust 5, 2016 at 10:36 AM

    Hi Sreekanth,

    I tried to add {xtype=selection,type=select} to the slide show. The issue is the drop-down value is not stored inside the node having order value. it's storing in the parent node "simple_slideshow" as a property. is there anyway that I can store the values inside. Thanks.

    ReplyDelete
  27. UnknownAugust 5, 2016 at 10:37 AM

    Hi Sreekanth,

    I tried to add {xtype=selection,type=select} to the slide show. The issue is the drop-down value is not stored inside the node having order value. it's storing in the parent node "simple_slideshow" as a property. is there anyway that I can store the values inside. Thanks.

    ReplyDelete
  28. UnknownNovember 8, 2016 at 5:12 AM

    Hi Sreekanth,
    has the upload file bug been fixed?
    I can't figure out how to do...
    Thanks in advance

    ReplyDelete
  29. Srikanth KMarch 30, 2017 at 6:46 AM

    Hi Sreekanth,

    Thanks for your inputs. Please link one final JS for this please. We are unable to make out with many versions of the JS. Thanks in advance!

    ReplyDelete
  30. JolichAugust 10, 2017 at 5:19 AM

    Hi guys,

    Is there some workaround with 'xtype=selection' issue? I'm looking forward to your advice. Thanks.

    ReplyDelete
  31. PavanSeptember 6, 2019 at 12:08 PM

    Hi Srikanth,
    Can you please tell exactly which line will makes the additem button to move down. Please help me srikanth.
    Thanks,
    Pavan

    ReplyDelete

Subscribe to: Post Comments (Atom)