DotNetNuke Skinning – Dealing with Images

July 03, 2008 By: Dave

There is one final basic topic we need to address prior to moving on to the details of working with Skin Objects, and that is the topic of including images in our skins and containers.

You might think that because you know where the images are on your installation, you’ll know where the images are on any other installation. But aside from the fact that DotNetNuke can be installed in a subdirectory you know nothing about, what if they rename the skin or module directory?

Now, ideally, the images will be loaded by using CSS specifications. This is the most portable way of adding images into our skins in such a way that the images can be found consistently. If you can make that work, I suggest you use that method first.

However, it is not always possible to achieve the effect we are after unless we put the image in the HTML markup in our ASCX file.

No. We need some way of specifying the directory for the images at runtime. And we do this with the SkinPath property.

For example, let’s say that you want to include an image tag in either your skin file or your container file. You would use the following syntax:

<img src="<%=SkinPath%>image.gif" height="10" width="150" border="0">

Assuming that image.gif is in the same directory as the ASCX this statement is in, the image will be loaded properly at runtime regardless of where DotNetNuke is installed or what directory the skin or container is in.