Quick tip for relative paths using Style Library

Here is very good definition from msdn about usage of Style Library :

“In Office SharePoint Server 2007, the publishing features create a special document library, named the Style Library, which Microsoft uses to deploy standard CSS files and image files that are used in publishing sites. The Style Library is also commonly used as a deployment target by web designers and developers who are using CSS files and image files to apply branding elements to Office SharePoint Server 2007 publishing sites.

When you are developing a generic and reusable branding solution for SharePoint Server 2007 farms, you cannot use the Style Library because it exists only in publishing sites. Windows SharePoint Services 3.0 does not create the Style Library when you create other types of sites, such as a Team site, Blank site, or a Document Workspace. Fortunately, this is no longer a problem in SharePoint 2010.

In SharePoint 2010, every site collection has its own Style Library. That’s because Microsoft has moved the standard provisioning instructions for creating the Style Library out of the publishing features and into the Global site definition. Each time SharePoint Foundation 2010 creates a new site collection, it adds the Style Library to the top-level site. This makes the Style Library an ideal candidate for deploying CSS files and image files in a generic branding solution.”

Every web developer has faced with absolute or relative path problems for assets files.Working with relative paths makes you mad or Sometimes solution is using fullpath which is mostly problematic, ,sometimes needed extra codding etc. But what about Style Library:

For a bad example:
I assume that you have a masterpage file and bellowed line:

<asp:Image
ImageUrl="~/Style Library/CustomImages/BlogofBugra.jpg %>"
runat="server"
/>

For this scenario the image file can be shown from default.aspx or any root page no problem is here.
But if you open a system page for example _Layouts/settings.aspx . upss your images link are broken ….

To fix this issue using $SPUrl can help us
For a good examples:

<asp:Image
ImageUrl="<% $SPUrl:~sitecollection/Style Library/CustomImages/BlogofBugra.jpg %>"
runat="server"
/>

<SharePoint:CssRegistration
  name="<% $SPUrl:~sitecollection/Style Library/styles.css %>"
  After="corev4.css"
  runat="server"
/>
Advertisement