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

Developing component with two ’html5smartimage’ widgets

Julio_Baixauli
Level 4
Level 4

Hi experts!

I would like to develop a component that renders some text and two images. I’m getting as a reference the ‘foundation/components/image’ component to render the images, using the ‘com.day.cq.wcm.foundation.Image’ class (see at [1]), like:

… Image image = new Image(resource); … <% image.draw(out); %> …

I can render my component with one image, and it works fine. But I don’t know how to add the second one.

For the first image, I’ve added, in the compoment dialog, a ‘cq:Widget’ of xtype=’html5smartimage’ (as the ‘foundation/components/image’). For the second image, I should add a second html5smartimage widget, but the properties of both widgets will collide.

I’ve tried to change the values of properties of the image (./imageCrop, ./filename, ./fileReference, etc.), adding a prefix (./imagenPrincipal/imageCrop, ./ imagenPrincipal/filename, ./ imagenPrincipal/fileReference, etc.). But then the image is not rendered, because the ./imagenPrincipal node in /content/… doesn’t contains the sling:resourceType node (that refers to the component, that inherits from ‘foundation/components/parbase’, that is the component that really renders the image, with the ‘img.GET.java’ class.

So, how can I include two html5smartimage widgets in my component and use them to render both images with ‘com.day.cq.wcm.foundation.Image’ class?

Thank you very much!!

[1] http://dev.day.com/docs/en/cq/current/javadoc/com/day/cq/wcm/foundation/Image.html

1 Accepted Solution
Paul_McMahon
Correct answer by
Community Advisor
Community Advisor

Take a look at how the the dialog is configured in /libs/foundation/components/textimage. If provides a proper example of how to configure the image on a sub-node. Notice the key issues is adding sling:resourceType hidden property on the sub-node. This allows all the normal image related functionality to work. In the example it points to foundation/components/image, however if you have written any custom image scripts that are stored either in your own image component, of if you have a project specific parbase component you may want to use that instead. 

View solution in original post

2 Replies
Paul_McMahon
Correct answer by
Community Advisor
Community Advisor

Take a look at how the the dialog is configured in /libs/foundation/components/textimage. If provides a proper example of how to configure the image on a sub-node. Notice the key issues is adding sling:resourceType hidden property on the sub-node. This allows all the normal image related functionality to work. In the example it points to foundation/components/image, however if you have written any custom image scripts that are stored either in your own image component, of if you have a project specific parbase component you may want to use that instead. 

View solution in original post

Julio_Baixauli
Level 4
Level 4

Perfect answer. Absolutely clear! wink

Thank you orotas!