CODEWITHSUNDEEP
asp.net-mvccontent-management-systemorchardcmsorchardcms-1.6
Scott Salyer
Scott Salyer

Reputation: 2475

Custom Zone Theming

I am building out an Orchard site with a theme that was built by a graphic artist who knows nothing about Orchard. Plugging that in is fairly simple, however the way he built it offered some various various options to the end user that I'm trying to replicate, preferably without building a custom module. The way he built the template is he included four different layout types: a 50/50, 33/67, 67/33 and a 100% (this one works because of Model.Content).

Sample Graphical View:

50/50
=================================================================================
|                                         |                                     |
|  <Left bar with HTML content>           |  <Right bar with HTML content>      |
|                                         |                                     |
=================================================================================

33/67
=================================================================================
|                       |                                                       |
| <Small Left w/HTML>   |  <Large Right w/HTML>                                 |
|                       |                                                       |
=================================================================================

(and so on..)

Based on what I can tell, there are ways to create various content types within Orchard that have a "Body" option (so I can have an HTML editor), but I can't figure out how to create one of these with two HTML editors on it so I can have a single routable page that has two zones it can affect. Inside Layout.cshtml, my example of binding a two-column layout would be like this:

@if (Model.SplitLeft != null && Model.SplitRight != null) {
    @* 50/50 split view *@
    <div class="col_12">
        <div class="col_6 clearleft padding_top_15">
            @Zone(Model.SplitLeft)
        </div>
        <div class="col_6 omega">
            @Zone(Model.SplitRight)
        </div>
    </div>
}

I know widgets have the capability to specify zones, but I'm trying to avoid those because they don't make it intuitive to an end-user when trying to build a two-column layout that they need to add two widgets, apply them to specific zones on specific layers, modify layer rules, etc. The site will have 40-50 pages that can be any of the four types specified above, so managing that via layers/widgets would be very complex. Further, it also doesn't allow the publish/unpublish model that I guarantee my client would want.

I can certainly build a module to do this if I need to, but something tells me Orchard already supports this and I'm just missing something in how to set it up.

Suggestions?

Edit: I looked into utilizing Alternates a bit, but I couldn't figure out how to create a content type that would have two other types underneath it (i.e. left/right views for the HTML editor). Probably the biggest hurdle is that I need two HTML editors to show up on the main editing screen so it's obvious to the user which is which (i.e. SmallLeft/LargeRight, LargeLeft/SmallRight, 50/50 Split) so building the page is intuitive.

Upvotes: 0

Views: 231

Answers (1)

Ivan Ferić
Ivan Ferić

Reputation: 4763

To add additional HTML editors, you need to add TextField to your content item. After you've added it, you need to set html as the flavour of that field.

Upvotes: 1

Related Questions