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
BedrockMission!

Learn More

View all

Sign in to view all badges

Coral Ui 3 Component.

Avatar

Avatar
Validate 1
Level 2
imadullakhan
Level 2

Likes

5 likes

Total Posts

51 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Establish
Give Back
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 2
imadullakhan
Level 2

Likes

5 likes

Total Posts

51 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Establish
Give Back
Boost 5
Boost 3
View profile
imadullakhan
Level 2

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
Springboard
MVP
Suraj_Kamdi
MVP

Likes

142 likes

Total Posts

156 posts

Correct Reply

41 solutions
Top badges earned
Springboard
Validate 1
Establish
Contributor
Ignite 3
View profile

Avatar
Springboard
MVP
Suraj_Kamdi
MVP

Likes

142 likes

Total Posts

156 posts

Correct Reply

41 solutions
Top badges earned
Springboard
Validate 1
Establish
Contributor
Ignite 3
View profile
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.