How to add floating parsys in a image component? | Community
Skip to main content
Himanshu_Singhal
Community Advisor
Himanshu_SinghalCommunity Advisor
Community Advisor
June 1, 2016
Solved

How to add floating parsys in a image component?

  • June 1, 2016
  • 4 replies
  • 2281 views

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

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 kautuk_sahni

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

4 replies

Ratna_Kumar
Ratna_Kumar
Level 10
June 1, 2016

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
Community Advisor
Himanshu_SinghalCommunity AdvisorAuthor
Community Advisor
June 2, 2016

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
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
June 2, 2016

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

Kautuk Sahni
M
MatheusBarreto
November 28, 2016

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.

Terms & ConditionsAccessibility statement

Loading footer...