Dec 25, 2013

What the Hell is an Item Template?

Theming in Orchard is a pretty vast subject. In the docs on theming for Orchard, http://docs.orchardproject.net/Documentation/Anatomy-of-a-theme , it covers a lot of content. A good overview but if you are still trying to wrap your head around whatis going on in Orchard, a bit overwhelming. A few people have found all the different ways of overriding displays a tough one so this post will try, and possibly fail, to address one aspect of templating: Item Templates.

tl;dr; Item Templates are the master views for content items.

So let's go into a little more detail. Say we have a ContentType, Movie, with three parts attached to it.

  • Movie
  • TitlePart
  • DirectorPart
  • StudioPart

We will use the Placement file to control what is displayed on the page. In this case we want all the parts displayed in the Detail view and only the TitlePart displayed in the Summary view (Detail view in the display type used when you navigate directly to a content item and Summary is displayed, for example, in the search results).

<Match ContentType="Movie">
  <Match DisplayType="Summary">
    <Place Parts_TitlePart="Summary:1" />
    <Place Parts_DirectorPart="-" />
    <Place Parts_StudioPart="-" />
  </Match>
  <Match DisplayType="Detail">
    <Place Parts_TitlePart="Content:1" />
    <Place Parts_DirectorPart="Movie:1" />
    <Place Parts_StudioPart="Movie:2" />
  </Match>
</Match>

The placement file basically defines which content parts will be displayed and where they will go. Summary, Content and Movie are "zones" within a content item that you assign parts to so they can be displayed. So let's go ahead and define our Content and Movie zones in a file called Content-Movie.Detail.cshtml.

@using Orchard.Utility.Extensions;
<article class="content-item">
  <div class="content">
    @Display(Model.Content)
  </div>
  <div class="content">
    @Display(Model.Movie)
  </div>
</article>

And one for Summary, Content-Movie.Summary.cshtml

@using Orchard.Utility.Extensions;

<article class="content-item">
   <div class="content">
      @Display(Model.Summary)
   </div>
</article>

These would both be Item Templates. If we wanted to change how the title was being displayed, we could create a Part Template eg. Parts.Title.cshtml

Hopefully that helped you out a little, if you have any questions, don't hesitate to ask

Tags: Orchard, Orchard Themes

1 Comment

  • Neil said Reply

    Thank you,

    This is a good start, but... In the Content-Movie.Detail.cshtml template, you have @Display(Model.Content) and @Display(Model.Movie) - what actually renders these parts?

    I understand that Parts.Title.cshtml performs the rendering function for the title part but what happens if other content types also include a title part?

    Sorry - probably obvious questions.

Add a Comment