Is there a option to overlap some components over other components in AEM layout container?

[adarsh_murali]

Suppose I have a image component, text component and tile component. Just like we can resize and place any components inside the layout container, I am thinking of an option to place the large image component in the background and other components on top of that. So when it is viewed other components can sit on top of the large image component. To achieve this on which component should I need to write the custom code.

[arunpatidar]

Hi,

you can check below:

Need a parsys component which hold multiple components

If your components are fixed(Text, title and image only in same sequence) inside large Image components this can be done easily.

Thanks

Arun

[adarsh_murali]

Thanks arunp99088702​ for the response but I am looking for the creation of a generic component that helps the author to drag & drop components. They should have the flexibility to select what all components can be placed over the larger component. I think the customization of layout container would be best choice because it already provides the option to resize the components. I think may be if we can merge the parsys we can achieve this.

[arunpatidar]

if you want only image background, you can handle this with CSS also. but yes we you need to make it generic you need to create new layout with parsys/responsivegrid.

Thanks

Arun

[arunpatidar]

Hi, I think you can do it another ways as well by adding responsive grid in main component and create dialog for main component to browse backgrounds image.

e.g.

MainComponent.html

<sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>

Please check below:

Configuring Layout Container and Layout Mode

Thanks

Arun

[adarsh_murali]

Thanks for your suggestion arunp99088702. I can only move the components with in the layout but not above any other components, right? I want to place some tile component, text component over image component. These components are already there, I just wanna reuse this. So that I can drag and drop the existing components over another component. May be in another page I may only want to put the tile component over the image component not both. Do we have any similar use case example available?

[smacdonald2008]

What do you mean you want to drop a title component over an image over - do you mean above the component.

Please post a screenshot to make it clear

[Lokesh_Shivalingaiah · Accepted solution]

Hi Adarsh,

It depends on your design of the component. It cant be generic I believe and it should be more based on the use case of a component.

Most likely as you have noted, this would be there for image/background components. So you can add a parsys element to the image component and can make that to be on top of the image via your CSS. Once you have the parsys, then authors can drag and drop any components into into like title, text etc.

Thanks,

Lokesh

[smacdonald2008]

Nice response Lokesh!

[adarsh_murali]

Thanks bsloki​ for the response. I can include multiple parsys components in the image component inside a layout container. So it would give authors the flexibility to put other components in any position where the parsys sit and layout container helps to resize those component. I think that is the best we can provide. Thank you all for your response.