Supressing Article <header> in a Projection Page

Topics: Customizing Orchard, Writing themes
May 15, 2013 at 12:12 PM
Greetings,

I've been setting up a custom theme following the 'blog posts by Philip Senechal on adapting a WrapBootstrap templet to work with Orchard. So far, everything is mostly working fine, with one exception. The projection layouts module from the gallery inserts a <header> section with the Model.Title in <h1> tags. This duplicates what the WrapBootstrap templet has, so you end up something like this
<div class="content">
    <div class="container">
        <div class="row">
            <div class="span12">
<article class="content-item projection-page">
<header>
  <h1>@Model.Title</h1>
</header>

<close all tags>

<div class="content">
    <div class="container">
        <div class="row">
            <div class="span12">

<start WrapBootStrap Theme>
I can get rid of the <article> for the projection page by supressing Parts_Title in the placement.info file, or by overriding the templet for Parts_Title, but wonder if this is best practice.

In fact, in my entire two days of reading Orchard documentation, I don't think I've come across anything the explains what this <article> tag is for, where it comes from or how to control it.

What's the best way to remove the <article><header> <h1> from the Projection layout? More generally, what's it doing there and how can I suppress without using the placement.info file?

If 'best practice' is to use placement.info, I will, but it's just bothering me that I don't really understand how this is being rendered in the first place.

Cheers,
- SteveN
May 15, 2013 at 1:05 PM
Edited May 15, 2013 at 1:07 PM
The article tag is just a way of semantically fluffing a page so that its content is best described at a html level and therefore its easier for a browser / screen reader / crawler to recognize the importance of the element or the span of the information.

Each content item is often wrapped as an article as they portray a degree of information about something.
This template can be re-made individually as per projection or by url or item id.

The default template for the projection looks like this:
@using Orchard.Utility.Extensions;
@{
    if (Model.Title != null) {
        Layout.Title = Model.Title;
    }
    
    var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
}
<article class="content-item @contentTypeClassName">
    <header>
        @Display(Model.Header)
        @if (Model.Meta != null) {
        <div class="metadata">
            @Display(Model.Meta)
        </div>
        }
    </header>
    @Display(Model.Content)
    @if(Model.Footer != null) {
    <footer>
        @Display(Model.Footer)
    </footer>
    }
</article>
You can use alternates to override this template by using shape tracing or by creating a new cshtml like:
~/Themes/{theme-name}/Views/Content-ProjectionPage.cshtml <- overrides all projection templates
~/Themes/{theme-name}/Views/Content-{content-id (of the projection)}.cshtml <- very specific template for the content id
and change the html to how you would like there. A Minimalistic template without headers and extra markup would be:
@Display(Model.Content)
You can do the same for how the projection list is decorated as well.

You may get a little more flexibility by using this layout extensions module as well:
Projection layouts
May 15, 2013 at 1:16 PM
Ah, thanks for that. A bit clearer now.

What if I need to override (supress) the <article><header> bit on all pages? Looking at the page examples, not all are going to be projections, and this markup seems to just be getting in the way everywhere in the WrapBootstrap theme.

Cheers,
- SteveN
May 15, 2013 at 1:26 PM
nunez wrote:
What if I need to override (supress) the <article><header> bit on all pages?
That should be as simple as creating a rather broad alternate for content like ~/Themes/{themename}/Views/Content.cshtml in that case.
Or create as many as different templates as you need for different content types:
Content-{ContentType}.cshtml
ie. Content-Page.cshtml

Remember it picks the most detailed alternate for the view like it picks the most detailed rule in placements. So there may be more detailed templates for types in modules. So you may need to copy them into your theme to suite your needs. Shape tracing will help you out when things are happening that you don't expect.