PeteT
PeteT

Reputation: 19180

ASP.NET Theme Images

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.

Upvotes: 14

Views: 14947

Answers (4)

Sprintstar
Sprintstar

Reputation: 8159

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";

Upvotes: 0

dewde
dewde

Reputation: 601

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") %>'> 

Upvotes: 2

Elijah Manor
Elijah Manor

Reputation: 18023

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.

Upvotes: 19

to StackOverflow
to StackOverflow

Reputation: 124726

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.

Upvotes: 0

Related Questions