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

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

Community Advisor

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'}"/>