How to add floating parsys in a image component?

[Himanshu_Singhal]

Need to create a custom image component.

Custom image component will have a image and parsys.

When we drag this custom image component over parsys in page, the image that we author should set as background and above that image a parsys should be displayed.

Now, that parsys in that we included in custom image component. The parsys over which we dragged the custom image component is different, 

It's just the requirement and I need to implement it, I tried explore it but didn't found anything specific.

Thanks,

Himanshu

[Ratna_Kumar]

Hi Himanshu,

Whatever you are trying is the wrong scenario.

Basically Parsys is a placeholder, that we can drag and drop the components to the page from Sidekick/Sailrail. We cannot embed the parsys in the image component.(we cannot create separate parsys in the image component).

If your requirement is to move/work with the images, you can use the jQuery plug-in.

Thanks,
Ratna Kumar.

[Himanshu_Singhal]

Hey, I tried create a rough of requirement. There, in image, I've sketched blocks 1 to 5. I need to create design like this on page.

The tabs you see from 1-5 can be single component dragged multiple times or it could be a multi-field component.

Now, on clicking on each tab, there should be background image that should be displayed which would be different for each tab. 

After that, for each tab, above background image, need to drag component and configure it and it would be specific to above tabs.

What could be the approach to achieve this?

Thanks & Regards,

Himanshu

[kautuk_sahni · Accepted solution]

Hi 

I would recommend you to read this documentation:-

Link:- https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/responsive.html

Specifically:- https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/responsive.html#Developing%20a%20Fluid%20Grid

//Developing a Fluid Grid

Basically, you should create a layout like:-

<div class="parent">

    <div class="child1"><cq:include path="par" resourceType="foundation/components/parsys" /></div>

    <div class="child2"><cq:include path="par" resourceType="foundation/components/parsys" /></div>

    <div class="child3"><cq:include path="par" resourceType="foundation/components/parsys" /></div>

</div> 

Or Use Bootstrap to make Grid/Tab 

Example:- http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem

//And you can apply any CSS properties (float,width,media tags etc.) on these DIVs. 

Also Read and go through this helpx article:- https://helpx.adobe.com/experience-manager/using/custom_columns.html

//Creating Adobe Experience Manager Custom Column Components

In your case, create a Layout of Tab using Jquery Plugins, and inside each tab you can fit in parsys.

I hope this will help you.

Thanks and Regards

Kautuk Sahni

[MatheusBarreto]

Working on a project I stumbled upon a similar situation. As the "correct" answers and ways are way more complicated and I couldn't find a simple and direct answer to the question, I did something that probably is not the best way, but worked:

I created a div and setted a background-image (bg.png, for sample purpose) on it by css, and this div has a parsys inside it. My client can change the "background" changing the image on DAM that I reference on my css (if he want to change the color, for example, he create a new image of the same size and name it as "bg.png". This way, me css will use this new image as the background of the div). Also, inside the div are my parsys.

Maybe not the best way, maybe not the elegant way but for my objective, it worked.