Custom Content Type list rendering

Topics: Writing themes
Jul 2, 2011 at 10:08 AM

I've recently installed orchard and after having a play about I'm now looking in to some customisation with my own theme but I'm not entirely sure how the customisation works with regards to lists of custom content types. I've created a new content type called Link which has three fields, Title, Description & Address and two parts, Common & Containable, and I've created a new list containing a number of these types that I'm displaying on the homepage with a container widget and I'd like to change how each content item is displayed. Rather than displaying them in the default format:

<li>
<article class="content-item link">
    <header>
        <div class="metadata">
            <div class="published">Item published date</div>
        </div>
    </header>
    <p class="text-field">
        <span class="name">Title:</span>
        <span class="value">Item Title</span>
    </p>
    <p class="text-field">
        <span class="name">Description:</span>
        <span class="value">Item Description<span>
    </p>
    <p class="text-field">
        <a href="Item Address" class="value">Address</a>
    </p>
</article>
</li>

I'd like to display it in a much simpler format:

<li>
<article class="content-item link">
	<p class="text-field">
		<a href="Item Address" title="Item Title">Item Title</a>
	</p>
</article>
</li>
Would anyone be able to talk me through what steps I need to go through to achieve this? Thanks in advance!
Jul 2, 2011 at 2:16 PM

Okay, I've been having a bit more of a play around today and I've made a bit of progress but could someone set my mind at ease that this is the correct way of doing things. Here's what I've done:

  1. Installed the Designer Tools.
  2. Used Shape Tracing to create a new template ~/Themes/Custom/Views/Content-Link.cshtml
  3. Updated the template  code to the following:
    @using Orchard.Utility.Extensions;
    @{
        if (Model.Title != null) {
            Layout.Title = Model.Title;
        }
        
        var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
    }
    
    <article class="content-item @contentTypeClassName">
        <a href="@Model.ContentItem.Link.Address.Value" title="@Model.ContentItem.Link.Title.Value">@Model.ContentItem.Link.Title.Value</a>
    </article>

The list item now displays as I wanted it to but I'm not sure if this is the most efficient process, before I edited the new template it contained a number of calls to Display() and Model.Header/Content/Footer etc does it matter that I have removed them from the template?

 

Coordinator
Jul 2, 2011 at 11:34 PM

With this, you are basically abandoning any possibility of using placement.info to add the rendering of new parts to your content type. This is saying that all you are interested in when rendering this content is the link title and anybody who wants more will have to update this template. A less radical and more Orchard-y way of doing things is to suppress the parts that you don't want using placement.info. You probably don't even need to override any template.

Jul 3, 2011 at 11:56 AM

If I use the placements file to supress the fields/parts that I don't want rendered how do I then combine the address and title fields in the <a> tag?

Coordinator
Jul 3, 2011 at 8:20 PM

By only overridng the template for that specific part and including that one in your placement.