how to set image dynamically in html5smartimage field depending on other field. | Community
Skip to main content
amangoyal15
amangoyal15
New Participant
November 25, 2016
Solved

how to set image dynamically in html5smartimage field depending on other field.

  • November 25, 2016
  • 5 replies
  • 1859 views

I have one pathfield and smartimage field.

i want to select image path from DAM through pathfield.

depending on the path of that image , i want to set that image in smartimage field.

Please assist me.

    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 edubey

    It's been a 7-8 months since I worked with classic UI.

    Here's is what I would suggest:

    1. To Pathfield there would be listeners available, where on select of some path it will trigger. It can be dialogselect  or change

    2. On these events you can write function. Event will give you the value selected in path field

    3. Now search for the smartImage using findByType and use setValue on it.

    I dont have the exact code, but it should be fairly easy as classic UI is full of events/methods to manage these stuff.

    https://docs.adobe.com/docs/en/cq/5-6-1/widgets-api/index.html 

    5 replies

    edubey
    edubeyAccepted solution
    New Participant
    November 28, 2016

    It's been a 7-8 months since I worked with classic UI.

    Here's is what I would suggest:

    1. To Pathfield there would be listeners available, where on select of some path it will trigger. It can be dialogselect  or change

    2. On these events you can write function. Event will give you the value selected in path field

    3. Now search for the smartImage using findByType and use setValue on it.

    I dont have the exact code, but it should be fairly easy as classic UI is full of events/methods to manage these stuff.

    https://docs.adobe.com/docs/en/cq/5-6-1/widgets-api/index.html 

      kautuk_sahni
      kautuk_sahni
      Employee
      November 28, 2016

      I have have asked internal expert to have a look at this.

      I will get back to you soon.

      ~kautuk

      Kautuk Sahni
      smacdonald2008
      smacdonald2008
      New Participant
      November 25, 2016

      To programmatically work with CQ.html5.form.SmartImage- look at this artilce: 

      http://experience-aem.blogspot.ca/2013/12/aem-cq-56-adding-images-in-multifield.html

      I will look for other examples of using this class. 

      However - why go through this coding when you DRAG and DROP DAM images via the content finder and you do not have to code.

      What advantage will selecting an image via a Path Finder have over whats available out of the box?  

      amangoyal15
      amangoyal15Author
      New Participant
      November 25, 2016

      smacdonald2008 wrote...

      To perform this - you need to use code and create a custom XTYPE. 

      You need to write application logic using this API:

      https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html

      To learn how to write a custom xtype -- see this community article: 

      https://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

      You would need to write code using the SmartImage class

      https://docs.adobe.com/content/docs/en/cq/5-6-1/widgets-api/index.html?class=CQ.form.html5smartimage

      Hope this helps.... 

       

       

      Hi smacdonald, i saw an reference of doing this with "handleDrop" function of CQ.form.html5smartimage. But i am not getting it properly.

      Please have a look on the snippet of the code -

      1. renderBlogImage : function(pathfield, path, anchor) {
      2. var panel = pathfield.findParentByType("panel");
      3. if (panel) {
      4. var image = panel
      5. .findByType('html5smartimage')[0];
      6.  
      7. var pathArray = path.split('/');
      8. var imageName = pathArray[(pathArray.length - 1)];
      9. var fakeDragData = {};
      10. var fakeRecord = {};
      11. fakeRecord.path = path;
      12. fakeRecord.name = imageName;
      13. fakeRecord.get = function(name) {
      14. return this[name];
      15. };
      16. fakeDragData.records = new Array(fakeRecord);
      17. fakeDragData.single = true;
      18. image.handleDrop(fakeDragData);
      19. }
      20. },

       

      Full Reference Link-

      http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__laij-hi_all_im_trying.html

       

      Please assist me , would it be  possible to achieve my result by this approach? 

      smacdonald2008
      smacdonald2008
      New Participant
      November 25, 2016

      To perform this - you need to use code and create a custom XTYPE. 

      You need to write application logic using this API:

      https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html

      To learn how to write a custom xtype -- see this community article: 

      https://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

      You would need to write code using the SmartImage class

      https://docs.adobe.com/content/docs/en/cq/5-6-1/widgets-api/index.html?class=CQ.form.html5smartimage

      Hope this helps.... 

        Terms & ConditionsAccessibility statement

        Loading footer...