Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

can edit width of image when it in text component?

Avatar

Level 1

does aem has any native function for the user to edit width of image when it in text component manually

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Normally you should not deal with these things directly, because the system provides you with an overall style every text and image should adhere to. Manual "tweaks" is likely to cause problems because of broken layouts.

View solution in original post

3 Replies

Avatar

Community Advisor

Hi @user07108 ,

 

Width of the image inside the text component?   click on the source edit button and you can paste your html there and hence you can edit your height and width attributes. 

Screenshot 2022-08-25 at 3.04.56 PM.png


There's one problem here though, the image path might not get shortened on dispatcher/production.

I would suggest you to use the core component image which comes with renditions and you can make use of layout system.
Thank you.

-Sravan

Avatar

Correct answer by
Employee Advisor

Normally you should not deal with these things directly, because the system provides you with an overall style every text and image should adhere to. Manual "tweaks" is likely to cause problems because of broken layouts.

Avatar

Community Advisor

Hi @user07108 , It might cause you problems in future if you just add an Image in the HTML section of the Text Component. Instead, Develop a custom Image Component with JS handling dimensions. 

here I give you one such HTL code, please write your own JS & CSS as per your needs.

<div class="ColumnImage">
    <div class="imagecontainer"
        data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image"
        data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
        data-sly-test="${image.src}">${image.src}"
    </div>
</div>
    
<div class="ColumnText">
    <div class="textcontainer col-md-12 text-center">
        <h2>${properties.textTitle}</h2>
    </div>
</div>

~Hope this helps,

Aditya.Ch

Thanks,

Aditya Chabuku