Coral Ui 3 Component.

Avatar

Avatar

imadullakhan

Avatar

imadullakhan

imadullakhan

26-07-2020

Hi @All,

 

I have one query like, In my component i have one image on right side and text will b on left side. So my requirement is the image and Text  location is not fixed i have to add that image into left side or right side same for text also. How i need to build the components like this can anyone help me here please.  

View Entire Topic

Avatar

Avatar

Suraj_Kamdi

MVP

Avatar

Suraj_Kamdi

MVP

Suraj_Kamdi
MVP

27-07-2020

@imadullakhan 

1. You can simply override the functionality by using the Image Core component or Text Core component.

  1. /apps/core/wcm/components/image/v2/image
  2. /apps/core/wcm/components/text/v2/text

2. create one component names text-image by using

  1. sling:resourceSuperType:  core/wcm/components/image/v2/image  or using 
  2. sling:resourceSuperType:  core/wcm/components/text/v2/text

3. Add your custom option just to set the image alignment.

4. Add some CSS that will align the Image-based left/right selected option in cq:dialog.

5. Now copy-paste the HTML code snippet into text-image.html from selected Sling resource type and updated your logic based on selected properties and CSS class.

 

Please let me know if you need any help on this.