Question

I have images in my theme (in the Content/ directory) and I want to show them in different places.

My current approach is : <img src="@Url.Content("~/Themes/MyTheme/Content/Images/image.gif")" />

This works, but is not very maintainable (what if I want to switch themes, etc).

Is there an built in method, something like GetCurrentThemeDirectory() that would return the directory so I could do or something like that?

Edit: from mdm's comment, I realize that changing the theme isn't a valid concern. I really just want to avoid typing out the url for every reference

Was it helpful?

Solution

Where are you referencing the image from? Module? Another theme?

If it is from the theme that has the image, then you don't need to worry about switching themes. If it is from another theme, then the image should be a part of the theme. If it is from a module, then it would make sense to store the image as part of the module or override it in the theme (see below).

If you wanted to have the image as part of the theme, then you could have the module return a 'default' shape and then override that in the theme. There really shouldn't be any reason to reference the theme's images from a module or vice versa.

Edit after your edit

In the themes I've written, I've followed what the Orchard authors do. Rather than using <img> tags, images are placed in Styles/images. They can then be referenced using the CSS background-image attribute.

In Views/Branding.cshtml:

<div id="header"></div>
<h1 id="branding"><a href="@homeUrl">@WorkContext.CurrentSite.SiteName</a></h1>

And then in site.css:

#header {
    /* snip */
    background-image: url(images/header.png);
    /* snip */
}

Themes/TheAdmin/site.css contains plenty more examples of this method.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top