You are hereHome
 Tags
    There are no more tags available to filter with.
  

Creating a DotNetNuke inline skinobject

Last Updated 10/26/2008
By: Erik van Ballegoij

Last week I was asked to come up with a way to use the Page Icon in DotNetNuke as a source for a multi lingual enabled image on a page. Although this could have been done by creating a skinobject, I decided to pull this one off by creating an "inline" skinobject.. by lack of a better term.

Before we start, there are a few things we need to keep in mind:

  • because the page icon is selected through the DNN interface, we need one location that is used as default location, without locale
  • DNN Admin pages use page icons, so we need to exclude those (as they are not located in the portal root)

First we start with adding a server side script block, with an asp.net PageLoad eventhandler, to our skin. This is done in the .ascx file of the skin, location in the file does not matter. Like this:

   1:  <script runat="server">
   2:      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   3:      End Sub
   4:  </script>

 

next, we will use a new literal control in the skin to add the code for our image to, like this:

 

   1:  <asp:Literal ID="litMyImage" runat="server" />

 

The code in page_load will look like this. Don't worry, i will explain

 

   1:  <script runat="server">
   2:      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   3:          If (Not String.IsNullOrEmpty(PortalSettings.ActiveTab.IconFile)) Then
   4:              If Not PortalSettings.ActiveTab.IsAdminTab And Not PortalSettings.ActiveTab.IsSuperTab Then              
   5:                  Dim Locale As String = System.Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName
   6:                  Dim myImageFile As String = ""
   7:                  If Locale = "nl" Then
   8:                      myImageFile = PortalSettings.ActiveTab.IconFile
   9:                  Else
  10:                      Dim myFile As String = PortalSettings.ActiveTab.IconFile.Substring(PortalSettings.ActiveTab.IconFile.LastIndexOf("/") + 1)
  11:                      Dim myFolder As String = ""
  12:                      If PortalSettings.ActiveTab.IconFile.LastIndexOf("/") > 0 Then
  13:                          myFolder = PortalSettings.ActiveTab.IconFile.Substring(0, PortalSettings.ActiveTab.IconFile.LastIndexOf("/"))
  14:                          myImageFile = String.Format("{0}/{1}/{2}", myFolder, Locale, myFile)
  15:                      Else
  16:                          myImageFile = String.Format("{0}/{1}", Locale, myFile)
  17:                          
  18:                      End If
  19:                  End If
  20:                  litMyImage.Text = String.Format("<img alt=""{0}"" style=""width:140px"" src=""{1}{2}"" />", PortalSettings.ActiveTab.Title, PortalSettings.HomeDirectory, myImageFile)
  21:              End If
  22:          Else
  23:              litMyImage.Visible = False
  24:          End If
  25:      End Sub
  26:  </script>

 

First we start off by checking for the existence of the iconfile:

 

   3:          If (Not String.IsNullOrEmpty(PortalSettings.ActiveTab.IconFile)) Then

 

Next we check whether the page is an admin tab:

 

   4:              If Not PortalSettings.ActiveTab.IsAdminTab And Not PortalSettings.ActiveTab.IsSuperTab Then              

 

Next, we get the 2-letter ISO code for the current culture:

 

   5:                  Dim Locale As String = System.Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName

 

Next, for the default locale (in this example the default is nl-NL), we use the iconfile as available in DotNetNuke:

 

   7:                  If Locale = "nl" Then
   8:                      myImageFile = PortalSettings.ActiveTab.IconFile

 

For all other locales, we need to do some calculating with the path information. What I'd like to do is to use this for the default locale: [portalroot]/[somepath]/iconfile.ext, and this for all other locales: [portalroot]/[somepath]/[2-letterisocode]/iconfile.ext. We need to do some cutting and pasting in the original path that DNN reports for the icon file:

 

  10:                      Dim myFile As String = PortalSettings.ActiveTab.IconFile.Substring(PortalSettings.ActiveTab.IconFile.LastIndexOf("/") + 1)
  11:                      Dim myFolder As String = ""
  12:                      If PortalSettings.ActiveTab.IconFile.LastIndexOf("/") > 0 Then
  13:                          myFolder = PortalSettings.ActiveTab.IconFile.Substring(0, PortalSettings.ActiveTab.IconFile.LastIndexOf("/"))
  14:                          myImageFile = String.Format("{0}/{1}/{2}", myFolder, Locale, myFile)
  15:                      Else
  16:                          myImageFile = String.Format("{0}/{1}", Locale, myFile)
  17:                          
  18:                      End If

 

Finally, we assign the value of the literal control with our image tag:

 

  20:                  litMyImage.Text = String.Format("<img alt=""{0}"" style=""width:140px"" src=""{1}{2}"" />", PortalSettings.ActiveTab.Title, PortalSettings.HomeDirectory, myImageFile)

I would agree that this is some work, however, we now have the option of a multilanguage page icon in our page. Of course a skinobject would also have worked, but the nice thing about this solution is that it will just work in this particular skin. Also, you can just package the skin and install it on a different installation and it will still work. In a sense you now have the option to include a skinobject with your skin.

Of course... you will be able to do that with DNN 5.0 anyway, but in a way this brings a great DNN 5.0 feature to DNN 4.x

The code in this blog was tested on DNN 4.9.0

Rate this:
Recent Comments

I notice your example plugged in .net code directly to the page. Is it possible to create an aspx/ascx page and include it in the skin and upload a vb/cs codebehind up with your skin so that items that are programatically designed(eg a custom menu) can be embedded to your skin?

Posted By: Bart Chavez on 10/18/2008
Yes thats quite possible. Remember that a skinobject is just a user control, so you can include your own usercontrol (ascx file) in your skin package and reference that from the skin. I have not tested that, but you probably won't be able to use separate code behind files as those file types are not allowed by DNN. I will do an example of how that works in one of my next blogs.
Posted By: Erik van Ballegoij on 10/19/2008
Very cool walk-through. Thanks!
Posted By: Will Strohl on 12/09/2008
 Powered By
DotNetNuke Powered! This site is proudly powered by DotNetNuke.