Coral Ui 3 Component. | Community
Skip to main content
imadullakhan
imadullakhan
Level 3
July 27, 2020
Solved

Coral Ui 3 Component.

  • July 27, 2020
  • 4 replies
  • 3500 views

Hi @1905403,

 

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.  

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 Suraj_Kamdi

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

 

 

 

4 replies

Vaibhavi_J
Vaibhavi_J
Level 7
July 27, 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. 

    imadullakhan
    imadullakhanAuthor
    Level 3
    July 27, 2020
    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.
    vanegi
    Adobe Employee
    vanegiAdobe Employee
    Adobe Employee
    July 27, 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!!

      Suraj_Kamdi
      Community Advisor
      Suraj_KamdiCommunity AdvisorAccepted solution
      Community Advisor
      July 27, 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.

       

       

       

      Suraj Kamdi
        imadullakhan
        imadullakhanAuthor
        Level 3
        July 27, 2020
        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.
        imadullakhan
        imadullakhanAuthor
        Level 3
        July 28, 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. 

          Terms & ConditionsAccessibility statement

          Loading footer...