Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

amangoyal15
Level 3
Level 3

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.

1 Accepted Solution
edubey
Correct answer by
Level 10
Level 10

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 

View solution in original post

5 Replies
smacdonald2008
Level 10
Level 10

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.... 

amangoyal15
Level 3
Level 3

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-manage...

 

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

smacdonald2008
Level 10
Level 10

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?  

kautuk_sahni
Employee
Employee

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

I will get back to you soon.

~kautuk

edubey
Correct answer by
Level 10
Level 10

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 

View solution in original post