This project is read-only.

Display a Banner Image in the Header Dynamically?

Topics: Customizing Orchard, Writing themes
Jan 20, 2012 at 7:44 PM
Edited Jan 20, 2012 at 7:46 PM

Currently I have a Banner image hardcoded in the header section of my Layout.cshtml file. The client has requested They want a new Banner image to display each time they create and publish a new page. Is there a way I can place a variable or @Zone or @ Display ect. in the Layout.cshtml file and have the client upload the image on the admin side and when published, it displays the image they uploaded?

Similarly the way the page title is displayed in every page using the @Layout.Title variable?

I hope this question makes sense.




Jan 20, 2012 at 7:53 PM

There are three ways to do this right now:

a) Use the existing ImageField module, you will have trouble then getting the image into the right place in the layout

b) Use URL layers so they can add a banner widget on each page (using either HTML or ImageField again) - this could work quite well if they want the same image across lots of pages, as you can just keep addings URLs into the layer rule

c) Use my Mechanics + Media Garden modules to create a "BannerImage" relationship and use the PaperclipPart to push it into the Header zone

In the next few weeks I'll have an easier way to do this, you'll be able to use my Alchemy module and then layout pushes will be possible directly in, so you could go with the ImageField module and just push it to wherever you want on the page. But that feature isn't quite finished yet, and in any case you need 1.x branch to use Alchemy. 

Jan 20, 2012 at 7:54 PM

Oh yeah, there's option d) of writing a custom part or driver to manually push a shape into the layout, it's not actually all that hard.

Jan 20, 2012 at 8:04 PM

Thanks Random Pete. I am currently using the ImageField Module. However it places it just below the header. About 100px down and to the left of where I would like it. I'm trying to figure out how to use files. I told the ImageFeild Placement to use the same placement as the Title Placement info:


  <Match DisplayType="Summary">
    <Place Fields_Contrib_Image="Header:5"/>


I did this and nothing changed. Any tips on how to manipulate the file to get what I want in the Header?



Jan 20, 2012 at 8:19 PM

I already said you would have problems doing that, and I even suggested some alternative strategies to deal with it.

Jan 20, 2012 at 8:20 PM

Also, you have <Match DisplayType="Summary"> which means you are only affecting Summary lists.

Jan 20, 2012 at 8:28 PM

Ok. Sorry. I missed your comment about Placement. I guess that won't work then. It sounds like Url layers might be the best solution. Is URl layers a module or is it a part of Orchard core? I'm not familiar with it yet.

Jan 20, 2012 at 9:04 PM

So Just curious, what is the purpose of the file if not to customize where things are rendered on a page. What is the

<Match Whatever></Match>


Tag for?

Jan 20, 2012 at 9:30 PM

<Match DisplayType="Summary"> means "match a situation where the display type is 'Summary'". You can use Shape Tracing to find out the current display type where you're rendering.