Item Templates vs Part Templates in Orchard - orchardcms

I'm learning Orchard and I did some Pluralsight course. It covered Part Templates, but now I'm reading this article: Anatomy of a theme and there's a section called: Item Templates. And I'm confused. I think I haven't came across this notion before. What is the difference? Let's have a sample that I have a content type Movie with content part Movie. I can override how it's rendered using Part Template. So where I would use Item Template in this case?

Wrote a blog post with a tiny bit more detail in regards to this question. Shameless plug: http://arkleseizure.net/what-the-hell-is-an-item-template
The wording is not particularly clear I would agree. So let's see if we can clear this up a little...
Content Type: Movie
TitlePart
DirectorPart
StudioPart
(So you have a content type called movie with 3 parts attached to it).
We want all the parts to be displayed in the detail view and only the TitlePart displayed in the Summary display. So we use placement.info
<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>
(Explicit notation used for clarity)
Placement basically defines where your content parts will be placed for a content type. 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 (This would be an "Item Template").
#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>
(You can use the shape tracing tool (http://docs.orchardproject.net/Documentation/Customizing-Orchard-using-Designer-Helper-Tools) to generate these for you and it will create default zones (Header, Meta, Content and Footer, I believe) and the relevant html.)
Our parts should now be displaying in the right places and we may want to change how the title is displayed. So we can create a "Part Template", Parts.Title.cshtml
<h1>Movie: #Model.Title </h1>
So in summary. Content Types are made up of lots of Content Parts. Part Templates override the Content Parts and Item Templates override the layout of a Content Type where Zones are defined. Placement.info direct Content Parts to the zones to be displayed.
Hope that helps!

Related

Related blog post in Orchard CMS?

I use Orchard CMS. I have added a content picker field in my blog post to show the related blog post. Now I want to show this related blog post in another div out of content div. How can I do this?
Looking at the Placement.info of the content picker, default the content picker items are displayed in the Content area of the content item (= your current blog post).
To move the related blog posts to for example the right sidebar, just add this to your Placement.info in your module/theme:
<Match ContentType="BlogPost">
<Match DisplayType="Detail">
<!-- AsideSecond is a global zone in your theme's layout -->
<Place Fields_ContentPicker="/AsideSecond:1"/>
</Match>
</Match>
Note the preceding forward slash, which targets a global layout zone instead of a local zone like 'Content' of the content item itself.
If you want to move the related blogposts to a self defined div in your content item, you can follow these steps:
1 - Create an alternate for the BlogPost content type (tip: use the shape tracer)
2 - Add a div somewhere in that alternate (probably named something like Content-BlogPost.Detail.cshtml), and in that a local zone:
<div class="related-posts">
#Display(Model.RelatedPosts)
</div>
3 - Alter the placement.info so that the related blogposts will display in the RelatedPosts zone:
<Match ContentType="BlogPost">
<Match DisplayType="Detail">
<!-- RelatedPosts targets the Model.RelatedPosts -->
<Place Fields_ContentPicker="RelatedPosts:1"/>
</Match>
</Match>

unable to display enumarion fields and input field in orchard using placment.info for custom form

I am using the custom form module in or chard and I am getting an issue to where if I am an anonymous user I can't view my custom form when I alter the placements of my elements using placement.info here is my code for the placment.info
I have all the correct permissions for the form so anonymous users can see the form until i try to alter the placement of content.
<Match ContentType="myform">
<Place Fields_Input_Edit-BandName="RightColumn:0.1"/>
<Place Fields_Input_Edit-FacebookLink="RightColumn:1"/>
<Place Fields_Enumeration_Edit="LeftColumn:0.2"/>
and here is the zone layout that i have inside of alternate
<div class="edit-item">
<div class="edit-item-primary">
#if (Model.Content != null)
{
<div class="edit-item-content">
<div class="first-zone">
#Zone(Model.CafeCompetitionLocation)
</div>
<div class="second-zone">
#Zone(Model.YourName)
</div>
</div>
}
</div>
</div>
for some reason this works when authenticated but not when you're not logged in please help. and explain to me if i am doing something wrong the main goal here is to be able to style a form quickly and the correct way
You probably have to allow anonymous access to your form in Permissions
custom-forms-in-orchard-cms-and-anonymous-users-permission
Just remembered this post as i was typing.

Orchard CMS Custom Theme - Every page displaying Title and Date Stamp

I have created a Custom Theme. Every page is displaying the Title and a date stamp at the top.
I have found posts saying comment out 'Placement.info' in the Theme route - but this has no effect.
How can I remove both of these?
You don't need to remove the parts, just hide them from display using the placement.info file. Common and Title parts are useful parts to include with a page. Particularly common part should be included with most content types as it stores information about when an item is modified, published etc.
The parts are displayed by default. To hide them you need to add to your theme's placement information to override and hide the parts' display shapes e.g. for the Page type:
<Placement>
<Match ContentType="Page">
<Match DisplayType="Detail">
<Place Parts_Common_Metadata="-"/>
<Place Parts_Title="-"/>
</Match>
<Match DisplayType="Summary">
<Place Parts_Common_Metadata_Summary="-"/>
<Place Parts_Title_Summary="-"/>
</Match>
</Match>
</Placement>
This hides the metadata and title for both detail and list views by putting them in the '-' zone. Because the '-' zone does not exist, the shapes are not displayed.
See these docs for more info on placement:
http://docs.orchardproject.net/Documentation/Understanding-placement-info
I went to Content / Content Types / Edit Page
Remove 'Title' & 'Parts Common' - seems to fix it.

Orchard Blog Summary Text

On the blog summary page -the one that lists your blog posts- I could do with having a bit more of the text visible from each blog post.
Is this possible?
I cant see it anywhere in the settings and for some reason shape tracing isnt letting me see what the template is for this.
I needed to do the same thing recently on Orchard v1.6. You're using the shape tracing so you're going in the right direction. The orchard documentation for alternates and placement cover this. There's a good example of this kind of modification on Tony Johnson's Argument Exception Blog.
As per Phil's answer, you need to modify the placement.info in your current theme to use an alternate view like so;
<Match ContentType="BlogPost">
<Match DisplayType="Summary">
<Place Parts_Common_Body_Summary="Content:5;Alternate=Parts_BlogPostSummaryBody"/>
</Match>
</Match>
And then add an alternate part named "Content-BlogPost.Summary.cshtml" in your theme's view folder;
#using Orchard.ContentManagement.ViewModels
#using Orchard.ContentManagement
#using Orchard.Core.Common.Models
#{
ContentItem item = Model.ContentItem;
string title = Model.Title.ToString();
BodyPart bpItem = item.As<BodyPart>();
string linkUrl = Url.ItemDisplayUrl(item);
}
<h4>#Html.ItemDisplayLink(title, item)</h4>
<div class="publishinfo">#Model.ContentItem.CommonPart.PublishedUtc by #Model.ContentItem.CommonPart.Owner.UserName</div>
<div>
<p>#Html.Raw(#bpItem.Text)</p>
</div>
Through reading other post I found that the view responsible for this was Parts_Common_Body_Summary. So I copied this from the core / common folder of orchard and copied it across to my themes view folder, before renaming it to Parts_Blog_Summary
I then set-up a rule for this in Placement.info as follows:
<Match ContentType="BlogPost">
<Match DisplayType="Summary">
<Place Parts_Common_Body_Summary="Content:after;Alternate=Parts_Blog_Summary"/>
</Match>
</Match>
This just left me the task of altering the string length in the new alternate view:
var body = new HtmlString(Html.Excerpt(bodyHtml, 350).ToString().Replace(Environment.NewLine, "</p>" + Environment.NewLine + "<p>"));

Orchard CMS - Remove Title and Metadata(published date) in a post

How do I remove the Title and Metadata(published data) in a post? Can this be done in Placement.info? I tried creating a custom content but doesn't look like a best solution. I just done it with CSS but I know this could be done in another way.
You can edit the Placement.info file in your current theme's root folder to not display the title and publish date:
<Placement>
<Match DisplayType="Detail">
<Place Parts_Title="-"/>
<Place Parts_Common_Metadata="-"/>
</Match>
<Match DisplayType="Summary">
<Place Parts_Title="-"/>
<Place Parts_Common_Metadata="-"/>
</Match>
</Placement>
See this post for further details: Orchard: Anatomy of a theme
Also, in case you are wondering where names like Parts_Title come from, see Customizing Orchard using the Designer Helper Tools (specifically shape tracing).
Alternatively, if you want to keep the title meta in the head whilst removing the title on every page create a Parts.Title.cshtml file in the view folder of your theme and then put
#{
Layout.Title = Model.Title;
}
which is exactly the same as the normal code except we remove the <h1> tag
#{
Layout.Title = Model.Title;
}
<h1>#Model.Title</h1>

Resources