I've just picked up Orchard for building my blog. As part of my endeavour to create this new weblog I'm creating a custom theme. This custom theme features both CSS and images.
My question
My question basically comes down to this: How do I render an image that is part of the theme?
What I have tried so far
I have tried to use the following:
<img src="@Html.ThemePath("/Content/Header.jpg")" alt="Logo"/>
But that doesn't work to great. It returns the following HTML markup:
<img src="~/Themes/FizzyLogic/Content/Header.jpg" alt="Logo"/>
Which is not exactly what it should be returning. I expected it to return the absolute path to the image inside my website.
There are couple of ways of achieving that. The best way would be to pass the URL to Url.Content(...) helper method like this:
<img src="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Header.jpg"))" />
which will render the proper path to your content. You can also just strip the leading tilde (~) like Html.ThemePath(WorkContext.CurrentTheme, "/Content/Header.jpg").Skip(1), which will give you the path relative to the app root, but that is not a good solution though.
You could of course use the Html.Image helper as well.
@Html.Image(Html.ThemePath(WorkContext.CurrentTheme,"/Content/Header.jpg"), "Alt Text", null)
Thank you for this - just picking up Orchard as well.