benrobb's blog

I was creating a master page today which was going to be deployed to a farm with many site collections, and I needed to reference an image which was in the local Style Library directly. An easy task if your site collection is at the root of a web application:

< img src=" / Style%Library/Images/MyImage.jpg" alt="My Image"/>

This works fine until you use that master page on a site collection which isn't at the root. The browser doesn't know or care about site collections, and interprets the src path as being relative to the website. In this case, in a site collection at "/sites/NewSiteCollection" this path should have been:

< img src=" / sites/NewSiteCollection/Style%Library/Images/MyImage.jpg" alt="My Image"/> 

Interestingly, there are no <img> tags in any of the out of the box master pages or page layouts. The answer is to use the same $SPUrl syntax that the <SharePoint:CSSLink> tag in, for example, default.master. The syntax for this is:

<img src="<% $SPUrl:~SiteCollection/Style%Library/Images/MyImage.jpg %>" alt="My Image" runat="server"/>

[It is important to include runat=server, because otherwise the literal text (e.g. <% $SPUrl...) will be sent to the client without any processing by the server.]

Simple really. For future proofing I'm always going to use this syntax in my master pages and page layouts.

PS: Yes. So its been a while since I blogged. I'm still alive, just very busy at work. Rather than try and produce big in-depth blogs, its probably easier to do shorter ones like this.

This entry was posted on Friday, April 20th, 2007 at 11:04 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

I was creating a master page today which was going to be deployed to a farm with many site collections, and I needed to reference an image which was in the local Style Library directly. An easy task if your site collection is at the root of a web application:

< img src=" / Style%Library/Images/MyImage.jpg" alt="My Image"/>

This works fine until you use that master page on a site collection which isn't at the root. The browser doesn't know or care about site collections, and interprets the src path as being relative to the website. In this case, in a site collection at "/sites/NewSiteCollection" this path should have been:

< img src=" / sites/NewSiteCollection/Style%Library/Images/MyImage.jpg" alt="My Image"/> 

Interestingly, there are no <img> tags in any of the out of the box master pages or page layouts. The answer is to use the same $SPUrl syntax that the <SharePoint:CSSLink> tag in, for example, default.master. The syntax for this is:

<img src="<% $SPUrl:~SiteCollection/Style%Library/Images/MyImage.jpg %>" alt="My Image" runat="server"/>

[It is important to include runat=server, because otherwise the literal text (e.g. <% $SPUrl...) will be sent to the client without any processing by the server.]

Simple really. For future proofing I'm always going to use this syntax in my master pages and page layouts.

PS: Yes. So its been a while since I blogged. I'm still alive, just very busy at work. Rather than try and produce big in-depth blogs, its probably easier to do shorter ones like this.

This entry was posted on Friday, April 20th, 2007 at 11:04 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.