Multiple projections on the same page

Topics: Troubleshooting, Writing themes
Sep 24, 2014 at 7:21 PM
I'm working on styling up a page and am stuck, wondering if anyone has an idea for me.

The issue is I have a single page that has three separate projections that all need to be wrapped in some custom html. So something like this:
<div id="outsidediv">
<div id="interiordiv">
      <div>Some custom html header</div>
      <div class="col1">[Projection #1 here]</div>
      <div class="col2">[Projection #2 here][Projection #3 here]</div>
</div>
</div>
I've tried two approaches to this:

1) Place multiple projection widgets on the page with a custom html widget
This is a bit ugly on the widget page but renders all the content. Problem being I don't see how to get my custom wrapper html (that is specific to this page, so can't go in layout) to wrap all 3 projections.

2) Create a new content type for the page with contentpicker fields that grab the three projections. Then create an alternate for that content type.
My problem here is I can't figure out how to access the projection items to render them in the view.

Anyone have ideas for fixing either approach ?
Sep 26, 2014 at 1:19 AM
Howdie. I have accomplished something similar before by doing this little trick. For the first option, let's say you want to go ahead and use the Widget approach (which seems to be a pretty good approach as there is no other great way to get more than one projection on a screen). So you have your three widgets that need to go into a "zone". In this case, your "zone" will contain the html for your wrapper. So, to get a new "zone" option on the Widgets screen, you go to your "Theme.txt" and edit the "Zones" section to add in a new zone (I will call it "Wrapped"). Now when you go back to your "Widget" screen, this zone will be there as an option.

Now you can put your three projections into this zone. But that zone doesn't render anywhere yet. What I would recommend is making a URL alternate for the current content then all you need to do is inject this snippet of code (where you want your projections to render:
<div id="outsidediv">
<div id="interiordiv">
<div>Some custom html header</div>
@Display(WorkContext.Layout.Wrapped)
</div>
</div>
The above code calls the current WorkContext.Layout (a shape that the widgets are injected onto and I believe the base "Model" that is utilized in Layout.cshtml) and calls the "Wrapped" shape (which is the zone we just created) and then uses @Display to render the shape.

But what about the individual wrappers around the projections (I just know you are asking). The easy way is to use this module: https://vandelay.codeplex.com/ and enable the Vandelay.Classy feature. Then add the CustomCss part to the widget content type. Now you can drop in your own class name on each individual widget (and thus get control of the individual projection wrapper class names).

That should do it, let me know if you have trouble or if this doesn't make sense.