can edit width of image when it in text component? | Community
Skip to main content
U
user07108
August 25, 2022
Solved

can edit width of image when it in text component?

  • August 25, 2022
  • 3 replies
  • 762 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by joerghoh

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.

3 replies

B_Sravan
Community Advisor
B_SravanCommunity Advisor
Community Advisor
August 25, 2022

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. 

 
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

    joerghoh
    Adobe Employee
    joerghohAdobe EmployeeAccepted solution
    Adobe Employee
    August 25, 2022

    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.

      Aditya_Chabuku
      Community Advisor
      Aditya_ChabukuCommunity Advisor
      Community Advisor
      August 25, 2022

      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
        Terms & ConditionsAccessibility statement

        Loading footer...