ASP.NET Theme Images

Question

How would I set an image to come from a theme directory (my theme changes so I don't want to directly reference) I am sure this is possible but every example I find doesn't seem to work. They are usually along the lines of:

asp:image ID="Image1" runat="server" ImageUrl="~/Web/Mode1.jpg" /

where Web would be a sub directory in my themes folder. Suggesting the theme directory would be added at runtime.

Answer 1

Not sure if I understood your question right, but if you have an image in a skin file, such as the following, it will come by default from the theme folder:

<asp:Image runat="server" ImageUrl="filename.ext" />

If you want it to come from a subfolder Web of the theme folder, use a relative path:

<asp:Image runat="server" ImageUrl="Web/filename.ext" />

Your example specifies a subfolder of the application root directory:

<asp:image ID="Image1" runat="server" ImageUrl="~/Web/Mode1.jpg"/>

See the MSDN page on themes and skins.

Answer 2

If you are wanting to reference an Image in your Theme folder, then I suggesting using a SkinId. Inside the skin file of each Theme Folder you would define something like this

<asp:Image runat="server" SkinId="HomeImage" ImageUrl="Images/HomeImage.gif" />

When you go to use the image in your code you do something like this...

<asp:Image runat="server" SkinId="HomeImage" />

Depending on the theme your application has picked it will pick up the correct image from the correct Theme folder.

MyWebSite
  App_Themes
    Theme1
      Default.skin
      Default.css
      Images
         HomeImage.gif
    Theme2
      Default.skin
      Default.css
      Images
         HomeImage.gif

Here is a good article explaining how to use themes, skins, and to set the theme several different ways.

Answer 3

Does anyone else have insight into this question?

Another option is to extend the base page. I added a function which will return the path of an image based on the current theme.

MyBasePage.vb

Private strThemePath As String = ""
Private strThemedImagePath As String = ""

Public Function ThemedImage(ByVal ImageName As String) As String
    Return Me.strThemedImagePath & ImageName
End Function

Private Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit  
    Me.strThemePath = "App_Themes/" & Me.Theme & "/"
    Me.strThemedImagePath = Me.strThemePath & "Images/"
End Sub

MyPage.aspx

<img src='<%= Me.ThemedImage("Loading_wait.gif") %>'>

Answer 4

There must be an easier way surely? For example, if I want to create a HyperLink control, and I want to specify an image for it, but that image is in a theme, how do I do it? I want the theme for the entire app to be controlled from web.config (eg <page theme="MyTheme">), I don't want to have to specify a theme for every item in my site.

edit: I have kind of answered my own question. I create in a skin file, this control:

<asp:Hyperlink runat="Server" SkinId="HyperlinkOne"
ImageUrl="Images/one.png" Text="One" NavigateUrl="~/PageOne.aspx"/>

Then in my code I simply do this:

HyperLink hl = new HyperLink();
hl.SkinID = "HyperlinkOne";