Expand my Community achievements bar.

SOLVED

AEM component design that holds other few custom components

Avatar

Level 5

Hi All, needs to incorporate title & other few custom components on a background(bg-img) image. While drag & drop components they do not show up on bg-img they are coming below the image. Any inputs how to achieve using Editable template. Need to drag & drop four components on bg-img.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hello @rsl_lucky,

You can do this with existing Core Components and Editable templates by using component policies for the Container component:

  1. Edit your template and add a policy configuration for the Container. In the Background tab, check the Enable background image box:
    theop76211228_0-1589700852721.png

     

  2. Now go to your page, place a Container and edit it to add a background image.
  3. You can add components in the Container which will display above the background image:
    theop76211228_1-1589700957846.png

Of course, you'll probably want to add some styles to make the result a little better.
 

View solution in original post

6 Replies

Avatar

Community Advisor

1.Create a background image component it will act as a container.

2. Add a layout container component inside background container component using data dly include.

3. Drag and drop image container component on your template.

4. Once you drag and drop that componrnt a parsys will come where you can add policies and drag and drop required component.

5. In the outer div of imagd container add a place holder for image so that you csn content author bavkground image and on top of that all thd components will come.

Hope it helps.

 

 

Avatar

Level 5
Thanks @Ankur_Khare for the quick turnaround, it would be great if any sample package with image container with placeholder for adding components would really help.

Avatar

Correct answer by
Level 10

Hello @rsl_lucky,

You can do this with existing Core Components and Editable templates by using component policies for the Container component:

  1. Edit your template and add a policy configuration for the Container. In the Background tab, check the Enable background image box:
    theop76211228_0-1589700852721.png

     

  2. Now go to your page, place a Container and edit it to add a background image.
  3. You can add components in the Container which will display above the background image:
    theop76211228_1-1589700957846.png

Of course, you'll probably want to add some styles to make the result a little better.
 

Avatar

Level 5
Thanks theop76211228 for the steps, but would be great if any sample package with image container with placeholder for adding components would really help, am working with Editable template for the first and it would help in my learning.

Avatar

Level 5
Hi theop76211228 I don't see background image on template as you mentioned on step-1.