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"
/>
Advertisements

About bpostaci
Escalation Engineer in Microsoft.

One Response to Quick tip for relative paths using Style Library

  1. Krutika says:

    Hi,

    I am trying to achieve same in my Masterpage. ie. display logo using SPUrl:~sitecollection to navigate to sitecollectionimages and display the logo.

    Using this with my URL : http://server:7000 it shows me the logo. However, in SharePoint Designer it is giving me parsing error “Error Creating COntrol :asp:literal
    The expression prefix SPUrl was not recognized. Please correct the prefix or register the prefix in the section of configuration.”

    Also when i use the same in managed path url say http://server:9000/sites/projects
    it is not displayign the image as well as rendering the css

    as it is taking path for the above as http://server:9000/sitecollectionimages

    Can you please provide some guidance why this can happen ? I am stuck on this issue and need to resolve it asap.

    ~Krutika

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: