Render image from a theme inside Orchard

Question

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.

Spock

Answer 1

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.

Zelda

Answer 2

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.

Miyokomizar

Indeed, although in this case it's a matter of personal preference (more HTML vs more C#;) – Zelda

I agree :) Your answer helped me out, ty – Miyokomizar