The standard way of working with image resources in themes, is to define the ImageUrl property in a skin file within the theme. Personally I've never really taken to the whole skin system, and seldom use themes for more than loading a different set of stylesheets. However, one thing that the skin file can do that a stylesheet can't, is specify the ImageUrl property of an Image control (or the src of an <img>, if you will).
To work around this issue without having to resort to skinning all my Image controls, I created a custom control that I've called ThemeImage. Basically, it works just like the Image control, only it lets me specify an ImageUrl path that is relative to the current theme. So for instance, if I have:
<fk:ThemeImage
runat="server"
ImageUrl="Images/Header.png" />
When being rendered, the ImageUrl is translated into ~/App_Themes/{CurrentTheme}/Images/Header.png, and the header image for the current theme is displayed to the user. Personally, I find this approach much cleaner and easier to work with than having to maintain markup across two different files just to get my images to display.
Implementing the ThemeImage control is almost embarrassingly simple (a telltale sign of a well designed API) – all we have to do is create a new class, inherit it from System.Web.UI.WebControls.Image and override the Render method:
protected override void Render(HtmlTextWriter writer)
{
string oldUrl = this.ImageUrl;
this.ImageUrl = String.Format("~/App_Themes/{0}/{1}", this.Page.Theme, this.ImageUrl);
base.Render(writer);
this.ImageUrl = oldUrl;
}
And that's it!
Look out for more posts on how to improve Themes in ASP.NET 2.0 soon – one particularly interesting in the pipeline deals with how to let include different MasterPages in different Themes.
