Part Component Placement

Topics: Customizing Orchard
Dec 19, 2014 at 2:03 AM
I have a part, say productpart. It contains a taxonomy field, a body part and Title part..

The product part's view dynamicaly generates an Image Via a CDN and where some property of that part is the key.

Now, I want placement to display the page view like

Image
Taxonomy Field
Title Part
Body Part
Product details

using placement I can place Taxonomy, Title, Body in any order I wish. Now, I cannot seem to break out the Product Details and the Image such that placement can configure the order.

I have tried a number of things. At first it seemed obvious, I need an attached shape that manages the image.

I am stuck.

I tried to have the driver generate two shapes using combined. It seemed like this would have worked! Shape tracer showed two shapes, one for product details and the other for the image. But placement failed to move them around. In looking at the code it appears it treats the combined components as fragments and combines the shapes generated html.

I next tried to generate a Shape from within the cshtml but this detached the image shape from the contentPart and I was equally troubled to have placement manage it's location.

Next thought was to create a Part called ProductImage from the UI, attach it to product Part. Seems clean accept I cannot seem to find the right way to override the view (if orchard is even attempting to generate one). I suspect this route requires a driver but drivers being derived from partdrivers, I have no "part"

The only option I think I have left is to create a model, part, driver for the image and attach this to the product. But this seems like a huge overkill for a simple arrangement of data on the page.

anyone have thoughts?
Dec 19, 2014 at 4:19 AM
Edited Dec 19, 2014 at 4:21 AM
So I unwillingly created a CDN Image part and attached it to the product part. This allowed me to separate the image and details.

Now I am trying to display the part with a responsive display. Where the Image, Taxonomy Field float left and title, body and details to the right on large screen displays. But pops to the original order as described above, Image, Taxonomy, Title, body and Product details when screen sizes are small.

This would not be a terrible challenge if I could wrap the Image and taxonomy field into a div, and the Title, Body and Details into a div.

Is there a way through placement to group parts in a div or even article? The wrapper doesn't seem to wrap multiple items unless I am using it wrong.

I tried to place each part into separate zones but this did not work at all but is really the ideal situation.