<div>
<sly data-sly-resource="${'image' @resourceType='/apps/weretail/components/content/image' , decorationTagName='div'}"><sly>
</div>
<div>
<sly data-sly-resource="${'image' @resourceType='/apps/weretail/components/content/image' , decorationTagName='div'}"><sly>
</div>
Using the above sly resource call the image needs to be explicitly defined e.g. image-a , image-c image-b. , since both the nodes are siblings hence above code will not work.
When components are same components are drag-n-dropped in page editing mode as sibling nodes in the jcr they are appended with the random strings.
Like the below category_teaser_random-number
![Screenshot 2020-08-17 at 1.34.02 PM.png Screenshot 2020-08-17 at 1.34.02 PM.png](/t5/image/serverpage/image-id/26218iF9CDF5FD5D726A7E/image-size/large/is-moderation-mode/true?v=v2&px=999)
How to replicate the above with nested core components or other components instances at the same level by using sightly/HTL in multifield, component included by @resourcetype etc,