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.
Solution
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.
OTHER TIPS
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") %>'>
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"/>
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";