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.  

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Seeker
MVP
Suraj_Kamdi
MVP

Likes

146 likes

Total Posts

157 posts

Correct Reply

41 solutions
Top badges earned
Seeker
Bedrock
Engage 1
Springboard
Validate 1
View profile

Avatar
Seeker
MVP
Suraj_Kamdi
MVP

Likes

146 likes

Total Posts

157 posts

Correct Reply

41 solutions
Top badges earned
Seeker
Bedrock
Engage 1
Springboard
Validate 1
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.

 

 

 

Answers (3)

Answers (3)

Avatar

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct Reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct Reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
Vaibhavi
MVP

26-07-2020

Hi @imadullakhan , 

This is pretty simple requirement and you can easily achieve this in a single component.

You can follow the below steps. 

1. Create a component which has dropdown to choose image or text. 

2 Based on dropdown selection it's respective place holder can appear, say when you choose image, placeholder to drop an image, alt text box etc and when you choose text a simple text box or richtext. 

3. You can use OOTB column control to divide the layout 5O% (you can choose option available in column control) 

4. Add a custom component created(step 1)inside column control. Considering 50-50 layout. Add it twice. Left and right side. 

5. Choose image on left side of component and text on right side of component or vise versa. You can achieve image-image, image-text, text-image, text-text any of this combination. 

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

28-07-2020

we can follow the below steps. 

1. Create a component which has dropdown to choose image or text. 

2 Based on dropdown selection it's respective place holder can appear, say when you choose image, placeholder to drop an image, alt text box etc and when you choose text a simple text box or richtext. 

3. You can use OOTB column control to divide the layout 5O% (you can choose option available in column control) 

4. Add a custom component created(step 1)inside column control. Considering 50-50 layout. Add it twice. Left and right side. 

5. Choose image on left side of component and text on right side of component or vise versa. You can achieve image-image, image-text, text-image, text-text any of this combination. 

Avatar

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

389 likes

Total Posts

377 posts

Correct Reply

147 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

389 likes

Total Posts

377 posts

Correct Reply

147 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
vanegi
Employee

26-07-2020

You can make a custom image with text (text and image control) where you allow the user to enter text and select and image separately and then provide additional layout options (image position) and responsive customization.

One more flexible option is to use acs-commons grid layout control to use different text and image controls while letting a grid based css framework (e.g. bootstrap) take care of responsive aspects of the site.

 

Reference: https://helpx.adobe.com/experience-manager/using/htl_banner.html

 

Thanks!!