Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

sightly component with drag and drop image

Avatar

Level 2
<div class="flex-row"> <div class="half-size float-left"> <div data-sly-resource="${'promo1image' @resourceType='foundation/components/image'}"></div> </div> <div class="half-size float-left"> <h3 data-title="${properties.jcr:textTitle1 || 'Title placeholder 1'}">${properties.jcr:textTitle1 || 'Title placeholder 1'}</h3> <p class="description">${properties.jcr:textDescription1 || 'Text placeholder. Description1'}</p> </div> <div data-sly-resource="${granite.resource.path @ resourceType='wcm/foundation/components/parsys'}"></div> </div>

 

Why when I drag and drop an image it's replicated (not a component, just an image) and this image is not added in /content/my_page.
This picture added at the end of my Sightly (HTL) component:

<div class="image cq-analyzable parbase"> <div id="cq-image-jsp-/content/alexpi-test/ap-test-flex-two-column/jcr:content/par/flexpromotionblock/promo1image"> <img src="/content/alexpi-test/ap-test-flex-two-column/_jcr_content/par/flexpromotionblock/promo1image.img.jpg/test.jpg" alt="file" title="" class="cq-dd-image"> </div>....</div>
1 Accepted Solution

Avatar

Correct answer by
Level 2

Solved.
The problem was with parsys declaration:
 

<sly data-sly-resource="${'children' @resourceType='wcm/foundation/components/parsys'}"/>

View solution in original post

4 Replies

Avatar

Level 10

Hi Aleksandrs,

Please let us know, what exactly the issue you are facing, so that we can solve your question.

~ Ratna.

Avatar

Level 2

I thought to use several drag-and-drop image components (it looks good and so simple) but it has side effect (replication of images):

<div data-sly-resource="${'promo1image' @resourceType='foundation/components/image'}"></div> <div data-sly-resource="${'promo2image' @resourceType='foundation/components/image'}"></div> <div data-sly-resource="${'promo3image' @resourceType='foundation/components/image'}"></div>

Avatar

Correct answer by
Level 2

Solved.
The problem was with parsys declaration:
 

<sly data-sly-resource="${'children' @resourceType='wcm/foundation/components/parsys'}"/>