This project is read-only.

Projection Rendering

Topics: Customizing Orchard, General, Writing themes
Jan 7, 2014 at 11:22 PM
I am trying to customize projection rendering. My goal is to move the pager on top and style each list item. I cannot figure out the cshtml naming to make this work. Then from there I would need the model properties. I've searched all over message boards and documentation. Can anyone help or provide an example?
Jan 8, 2014 at 4:43 PM
Hey there, this is just a quick and not very detailed response ;).

This is some old (and a bit dirty) code which i used to build some kind of gallery from a projection.
The name of the file is Content-ProjectionPage-url-your-content.cshtml
<div class="main-page">

    <div id="gallery">
                @*[1] is the projection*@
                @for(int i = 0; i < Model.Content.Items[1].Items.Count; i++) {
                    var item = Model.Content.Items[1].Items[i];
                    string title = item.ContentItem.TitlePart.Title;
                    string cleanTitle = title.Replace(" ", string.Empty);
                    var images = item.ContentItem.Referenz.Logo.MediaParts as List<MediaPart>;
                    var img = images.FirstOrDefault();
                    string url = img != null? img.MediaUrl : null;
                        <a @if (i == 0) {<text>class="active"</text>} href="#@cleanTitle" data-oid="@(i+1)">
@* ReSharper disable AssignNullToNotNullAttribute. Logo is required - and will never be null*@
                            <img src="@Url.Content(url)" alt="@cleanTitle"/>
@* ReSharper restore AssignNullToNotNullAttribute *@
                            <span itemprop="name">@title</span>


    <div id="gallery-content" class="content shadow" itemprop="description">
The pager is somewhere in the Model (ProjectionPart.Pager), but i don't remember exactly where right now.
Anyway, you could "@Display(InsertPagerShapeHere)" anywhere you like
Jan 8, 2014 at 11:45 PM
Edited Jan 8, 2014 at 11:53 PM
I wasn't able to get that cshtml file format to work. I used Content-ProjectionPage.Details.cshtml. Then because I had no idea what the Model contained. I used reflection to list properties on the page until I figured out that the Model contains 3 shapes. The first is empty, the second is the pager, and the third is the list. It seems like a bad hack but I now have the pager displaying first.
Is there a better way?

Other questions:
How can I know what the Model contains in each context? Also now I'm going to need to format the list. I know Pager.cshtml works for the pager. I'm not sure if I'm missing some documentation somewhere but this all has been very difficult to figure out.

@using Orchard.ContentManagement
@using Orchard.Utility.Extensions;
var title = WorkContext.Resolve<IContentManager>().GetItemMetadata((IContent) Model.ContentItem).DisplayText;
var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
var pager = Model.Content.Items[1];
var items = Model.Content.Items[2];
<div class="moduleContentMain @contentTypeClassName"> <h3>@title</h3> @Display(pager); @Display(items); </div>