Instead of Header an Image to show

Topics: Customizing Orchard
Mar 2, 2012 at 8:07 PM
Edited Mar 2, 2012 at 8:09 PM

Hi, First of all, it's an amazing amount of work! I love to use it, although as an old-timer it is sometimes difficult to find how to do it. (Must be the age:-)

I'm trying to replace the header of the site by an image. I thought that it should be somewhere in branding.cshtml

but i do not know how to work that out. If you guys have time, could you give me some clou how to do that.

Second question: Next to the header i present a differend image that i like to depend on summer, winter, authumn and spring.

I now only have one image for always.

thanks in advance

Developer
Mar 2, 2012 at 8:22 PM
Edited Mar 2, 2012 at 8:25 PM

Not sure what it is that you can't work out? In Branding.cshtml, you can put all HTML you want, including image tags.


In any case, it's important to know that Branding.cshtml is a so called template of a shape called Branding. The "Branding" shape is created on the fly from within Layout.cshtml, which is the master layout of the website. You can see the creation of the Branding shape somewhere at the top of Layout.cshtml:

  /* Inserting some ad hoc shapes
    ***************************************************************/

    WorkContext.Layout.Header.Add(New.Branding(), "5"); // Site name and link to the home page
    WorkContext.Layout.Footer.Add(New.BadgeOfHonor(), "5"); // Powered by Orchard
    WorkContext.Layout.Footer.Add(New.User(), "10"); // Login and dashboard links

As it turns out, the Branding shape is being added to the Header zone. Should you for example want to create your own shape, here is what you could do:

1. In Layout.cshtml, create a shape, perhaps called MyImage, and add it to the Header zone.
2. Create a razor template called "MyImage.cshtml" directly in the Views folder of the theme (same folder as where Branding.cshtml resides).

For example:

/* Inserting some ad hoc shapes
    ***************************************************************/

    WorkContext.Layout.Header.Add(New.Branding(), "5"); // Site name and link to the home page
    WorkContext.Layout.Footer.Add(New.BadgeOfHonor(), "5"); // Powered by Orchard
    WorkContext.Layout.Footer.Add(New.User(), "10"); // Login and dashboard links
    WorkContext.Layout.Header.Add(New.MyImage(), "1"); // My own image insterted in the Header zone

For more information on shapes and rendering them, check out these links:

- http://docs.orchardproject.net/Documentation/Accessing-and-rendering-shapes
- http://docs.orchardproject.net/Documentation/Template-file-syntax-guide

 

With regard to your second question, it works in the same way: you could create an ad hoc shape from within Layout.cshtml, add it to the appropriate zone, and from within the razor template you can provide logic that renders the correct image based on the current season.

 

Mar 9, 2012 at 8:43 PM

I have tried the following:

In layout.cshtml i did add:

         @{var mnd = DateTime.Now.Month;}

That will give a number back in mnd which is from 1 - 12

Next i wanted to add that number as a filename (extended with .png) in site.css under:

#header
{
   Background:transparent url(mnd.png) no-repeat bottom right
}

but i ran into the problem that i did not know how i can make the variable mnd translate to the filename mnd.png (and where to do that, since it is not possible in a .css file - i think), where mnd is the same number as found in the variable.

If this could be done, then i only have to add twelve .png files and per month the file will change.

Does this idea make sense, or is this compleet wrong?

Regards, and thanks for answering

Developer
Mar 10, 2012 at 12:02 AM

I think the idea makes sense, yes. However, CSS files are not processed by the Razor view engine (unless you map the .css extension to the razor view handler, but I have never tried that).

What I would do to solve this is one of the following:

- Define the #header css rule in the layout.cshtml itself (using the <style> tag)
- Set the background on the #header element using inline CSS (in Layout.cshtml)
- Change the extension of your stylesheet from .css to .aspx (and also move the logic into .aspx where you determine the current month)

Coordinator
Mar 10, 2012 at 12:04 AM

Please take a look at the Super Classic theme.

Mar 11, 2012 at 12:47 PM

I've read your comments, but for now my level of knowledge is too low. If you could give this in Macro or in coding for a accumulator computer from the sixties I might have understood, but my learning curve is going slowly ;-)

In the meantime i tried the following:

Since I do not use the Real title of the Header (@WorkContext.CurrentSite.Sitename) i thought i could use the branding.cshtml and in a table of two columns i did put an image on both columns. The image in the right column is changing according to the month. Here is the coding and i only did month 3 so far:
I do use FloralBlack Theme with some minor changes.

@{ var mnd = DateTime.Now.Month;
       
if(mnd == 3)
        {
        <table id="header">
        <tr>
        <td style="width:562px"><img src="../Content/Images/mnd/lavandula.png" width="300" height="160" /></td>
        <td style="width:400px"><img src="../Content/Images/mnd/3.png" width="400" height="200" /></td>
        </tr>
        </table>
        }
}

Both images are under the folder:  FloralBlack/Content/Images/mnd

The weird thing is that i do not see any image, even were ever i place them.

Could someone emphasis on this?

Also is this a possible solution? Regards,



Coordinator
Mar 11, 2012 at 4:50 PM

use @Url.Content("~/Themes/YOURTHEME/Content/....")

Also, you'd better add a class lile 'month-image-1' using 

class="moth-image-@DateTime.Now.Month"

and setting the image urls in your css.

 

NB: There is no such MACRO concept in Orchard ... seems you have done too much Umbraco by the past ;)

Developer
Mar 11, 2012 at 7:26 PM
Edited Mar 11, 2012 at 7:27 PM

Or, without a css class:

@{ var mnd = DateTime.Now.Month;}
        
        <table id="header">
        <tr>
        <td style="width:562px"><img src="@Url.Content("~/Themes/FloralBlack/Content/Images/mnd/lavandula.png")" width="300" height="160" /></td>
        <td style="width:400px"><img src="@Url.Content(string.Format("~/Themes/FloralBlack/Content/Images/mnd/{0}.png", mnd)" width="400" height="200" /></td>
        </tr>
        </table>
     

Now you don't have to write a case for each month, as the current month is being used to dynamically construct the url to the image.

The "Content" method of the "Url" object will resolve the specified relative path (starting with a ~) to the correct path to be used on the client side.

Mar 11, 2012 at 8:20 PM

Hi Sebastien, your first line was the right instruction. It works now (and a big relief for me :-) Thanks a lot for your answer.

Still have a question: is the folder with my images at the right spot (FloralBlack/Content/Images/mnd) ????

It is now positioned under the Themes folder. Or should i place this folder in the root, to make it possible to use the image folder also when i change to another Theme. In the current situation i have to edit the lines when i decide to use another Theme. If it is posiioned in the root I only have to copy the Branding.cshtml file, isn't it.

What should be the ideal place to put this folder?????

Your other two lines are worth to look into, but i have to chew on it first for some time and trying to comprehend and find out where to put what ;-)

I'm still a newbee

Mar 11, 2012 at 8:24 PM

Hi skywalker, i just got your answer, and i must confess it is right what i wanted, many thanks !!!

Specially the addition that i do not have write a case, since that is solved this way.

I'm learning fast and givbes me great pleasure on my age :-)

I do not kow whether you or Sebastien will emphasis on my last two questions, but so far thanks both for your help

Developer
Mar 11, 2012 at 9:07 PM
Edited Mar 11, 2012 at 9:10 PM

You're quite welcome. I always say: one is never too old to learn. And you're my evidence :)

With regards as to where best store your images: I'd recommend to put them into the Media folder (or any subfolder of Media). That way, you can access any image from any theme without having to change the paths. As you'll see, the Media folder lives in the root of your website.

For example, you could store the image for the first month here: ~/media/default/months/1.png.

Yes, if you were to create another theme, all you would have to do is copy Branding.cshtml (assuming that the new theme also creates a Branding shape and adds it to a zone, like it does in your current theme).

Coordinator
Mar 11, 2012 at 11:44 PM

You can put them in Media, true, and you will be able to edit them from the application directly.