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

Coral Ui 3 Component.

Avatar

Level 4

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.  

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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.

 

 

 

View solution in original post

11 Replies

Avatar

Community Advisor

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

Level 4
Could you please give me a full description how do i need to use OOTB in component Script i tried this one but didn't worked.

Avatar

Community Advisor

Hi @imadullakhan ,

Added the OOTB component image below. 

It is just one of the option to divide your page layout to make it 50% 50%

You can choose any of the below option to divide page layout. 

  • Column control component
  • Responsive grid 
  • Use simple css to make it 50-50 %

ColumnControl ConfigPanel.gif

Avatar

Level 4
Okay got it! Thank you soo much in that i need to add particular components right

Avatar

Level 4
Thank you soo much @Vaibhavi_J i followed your first procedure i got the output. Thank you

Avatar

Employee

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

Avatar

Correct answer by
Community Advisor

@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.

 

 

 

Avatar

Level 4
Hi Suraj, I tried multiple soltution i didn't get the exact solution. see i have one component in that component i have image on left and text on right i have to make that one to be an vice varsa. like that component i want it build. Help to solve this one.

Avatar

Community Advisor

@imadullakhanI think you can solve this issue by writing custom SCSS/CSS.

Just add two CSS classes that will handle the left and right alignment of text/image.

In the component HTML set one default variation for left/right alignment. similarly, add one checkbox option in cq:dialog which will be used to check whether the author want left/right alignment.

do something like:

 

<div class="common-class ${properties.alignement ? "variation1-class" : "variation2-class"}">

     ---------

     ---------

<div>

 

 

 

 

Avatar

Level 4

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.