Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

in place editing doesnt make effect

Avatar

Level 2

Hi, I have on component rotate, crop and etc. but when I try to submit changes, for example rotate to left my image stay as it is.

I'm adding image on this way:

 

 

<div class="cmp-cardcomponent__image" data-image="url(${properties.fileReference @ context='text'})"
     style="background-image: url(${properties.fileReference @ context='text'});"></div>

 

Before submiting:

 

stefanjank_0-1653557133004.png

 

And after I press submit
You can see that my pitcure is not rotated:

 

stefanjank_1-1653557158899.png

But, when I use this:

 

 

<div data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image">
    <div class="cq-dd-image ">
        <img src="${image.src}"/>
    </div>
</div>

 

Rotate is working, but I now lose all css styles, no one is working. I tried to add it like this:

 

<div data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image">
    <div class="cq-dd-image cmp-cardcomponent__image">
        <img src="${image.src}"/>
    </div>
</div>

 

But doesnt work. Ass you see I added my cmp-cardomponent__image in div class

Someone to help?

 

 

2 Replies

Avatar

Community Advisor

Hi @stefanjank ,

 

It seems the issue is with your CSS. Try to give max-height and check, Because in the 2nd screenshot rotate is working but the image is getting cropped. If possible then please share your CSS snippet?. So that I can try to reproduce it.

Avatar

Level 2

Rotate isn't working. Original picture is people are in normal position, then first ss is when I rotate picture and click submit and second ss is how picture is looking after I click submit, as you can see that crane or something is in normal position, not rotated.