Skinning Portal Images in DNN with ImageSwap

DotNetNuke has powerful skinning support, but skin designers are often frustrated by their inability to customize various images with static links in the portal. In this post, I’ll suggest a technique and some code to enable skinning of such images.

Let’s first understand the problem. Say you have a DNN site and you have created a custom skin. You have tweaked the CSS to perfection and everything looks great. That is, until the user switches to Edit mode. At that point, various icons used by the framework are displayed on the page. These include icons for help, action icons such as Save, Cancel and Delete. If you want to change these images, your only option is to replace them at their default location. Unfortunately, this is not a long-term solution. Firstly, the change will affect all portals on that instance of DNN. Secondly, the next time you upgrade, the images will be over-written.

An ideal solution would be for you to include the desired images with your skin and have the framework use your images instead of the default. In order to do this on the server-side, there would be several changes needed to the DNN Core. And even if these changes were made, chances are the result would not be very performant.

My solution, called ImageSwap, is to leverage jQuery to create a simple, but effective client-side solution to the problem. The solution is something like this:

Step 1: Select all IMG elements in the page whose “src” attribute has a value containing a known path (example: images/)

Step 2: Iterate through the selected elements, and for each element:

a) Check if a similar named image exists in a sub-folder of the current skin

b) If No, then do nothing

c) If Yes, then change the “src” attribute to the URL of the image in the skin folder

That’s it….in two simple steps we have a solution to skin portal images.

To implement this solution, you will need to add some code to your skin. I have provided the requisite code for DNN4/DNN5. I’ll embed this code into a DNN5 Widget and post it here soon to make it even easier to use.

Implementation of ImageSwap

Step 1: Decide which portal images you want to replace, then create a sub-folder in your skin folder with the replacement images. For example, you might create a sub-folder named “portal/images.” Take care to name the files exactly the same as the originals.

Step 2: Add the following HTML to each layout file in your skin:

&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js&quot;&gt;&lt;/script&gt;

Step 3: Embed the following script in your skin:


var searchPath = &quot;/images/&quot;;
var replacePath = &quot;&lt;%= SkinPath %&gt;portal/images/&quot;;
(function($)
{
 $(&quot;img[src*='&quot; + searchPath + &quot;']&quot;).each(

 function()
 {
 var frags = $(this).attr(&quot;src&quot;).split(&quot;/&quot;);
 var oldsrc = $(this).attr(&quot;src&quot;);
 $(this).error(
 function()
 {
 $(this).attr(&quot;src&quot;, oldsrc);
 });
 $(this).attr(&quot;src&quot;, replacePath + frags[frags.length-1]);
 }
 );

})(jQuery);

You will want to change the values for “replacePath” so it corresponds to the actual folder name you use in your skin for the replacement images. If you are using DNN5, you can delete the script reference for jQuery as it is automatically referenced by DNN as long as widgets are enabled (the default).

I have attached a ZIP file that contains an HTML file that demonstrates this approach. In the file, there are several color icons rendered using the IMG element. In another folder, I have grayscale images of all but two of the icons. When you display the page in your browser, you will see that all but two of the color icons are replaced with their grayscale versions, demonstrating how the ImageSwap script functions.

If you use the script, please leave a comment about your experience so I can improve the script and the ImageSwap widget that I will be creating for DNN5.

[download id=”1″]

Skins