Per Page Custom Header Image without using Layers

Topics: Customizing Orchard
Feb 6, 2013 at 9:50 AM

I know this has been asked before as I have read for a while the various methods for doing it, but I cannot seem to follow them (I just do not have enough understanding of MVC / orchard to do so yet as a newbie), but I hope someone can help me with a step by step approach?

I am trying to "simply" have an [optional] header image in my BeforeMain Zone, I know I can do this with layers and a html widget for each, but that seems very messy.

My thinking is as follows -
  1. Add a new field to my page content type (called HeaderImage) which is a media picker or equiv
  2. And then add some code into my layout.cshtml custom theme to show the image (I do not know how to do this) if it has a value.
    The headerimage could be inserted inside the BeforeMain Zone or it could replace it entirely as long as I can control it.
Any help (better ways) would be much appreciated.

Feb 6, 2013 at 5:37 PM
The simplest solution is to define the Palcement for the field to be in BeforeMain like this:

<Match ContentType="YOURTYPE" DisplayType="Detail">
<Place Field_MediaPicker-FIELDNAME="/BeforeMain" />

Otherwise you can override the templates, either of this specific field, or the whole content type. You can use the Shape Tracing module in both cases.
Once you have this new template file created, you can display a specific shape somewhere else by calling Layout.BeforeMain.Add(YOURSHAPE) in a code block.
Feb 7, 2013 at 9:27 AM
Edited Feb 7, 2013 at 9:33 AM
Thanks Sebastien,

Match example looks great way to do it -

I have added -

<Match ContentType="Page" DisplayType="Detail">
<Place Field_MediaPicker-HeaderGraphic="/BeforeMain" />

to my themes (which works on other parts as I tested deletion of page body with it), but it does not effect the HeaderGraphic Field? I also tried "-" placement value to try and remove it, but that did not work. I have checked name.

Any suggestions?

Feb 10, 2013 at 6:18 AM
I can confirm this works. Please check for typos in the field name, or try to take it out of the match to see if it has effect, so you can narrow down to the Place or the Match being wrong.
Feb 11, 2013 at 12:38 PM
Thanks Bertrand,

Narrowing to place showed the Place was incorrect, we had a s missing off Field_, which showed when I used the designer tools to review, so ended up -

<Match ContentType="Page" DisplayType="Detail">
<Place Fields_MediaPicker-HeaderGraphic="/BeforeMain" />