DotNetNuke Skinning – Dealing with Images

A graphical depiction of a very simple css doc...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.

Related Post

  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it wrong, which...
  • DotNetNuke Skinning – Standard CSS ClassesDotNetNuke Skinning – Standard CSS Classes By now, you've gotten the idea that creating a set of skins and containers for DotNetNuke is a little bit more work than just creating some HTML, images, and a CSS file. Hopefully, you also realize...
  • DotNetNuke – Avoiding Container CollisionDotNetNuke – Avoiding Container Collision So many of the skin and container sets I buy are written in such a way that if I were to mix and match my containers, graphic disaster would strike my page. Fortunately, the problem is rather ea...
  • DotNetNuke Skins – Hello, WorldDotNetNuke Skins – Hello, World Now that we understand how the ASCX files and CSS files relate to each other, it's time to create our first skin file. Today we are going to deal primarily with the issues of layout. If you ar...
  • DotNetNuke Skinning – ContainersDotNetNuke Skinning – Containers Today we move our focus to DotNetNuke containers. Not because we are done with skins, but because we can't go any further in our discussion of skinning until we cover containers. As with skins...