Developing component with two ’html5smartimage’ widgets

[Julio_Baixauli]

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

[Paul_McMahon · Accepted solution]

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. 

[Julio_Baixauli]

Perfect answer. Absolutely clear! 

Thank you orotas!