Double replacement for site collection replacement token in master page?

Question

I am setting up custom branding for a site, using a custom master page, and linking to custom css, image and script files all hosted in the Style Library on the root web of the site collection.

As suggested in this answer, I am using the replacement token ../.. to refer to the site collection. So, for example, some of my links look like this:

<link href="../../Style Library/custom/css/custom_v2.css" rel="stylesheet" type="text/css"/>
<asp:Image ImageUrl="../../Style Library/custom/img/logo3.png" runat="server" />

This works fine for the home page of the site, and for any main list view for any of the lists or libraries on the site. However, if I go to a "system" page, like Site Contents or Site Settings, everything gets broken, and I can see that my links have turned into this:

<link href="../../sites/mysite/Style Library/custom/css/custom_v2.css" rel="stylesheet" type="text/css"/>
<asp:Image ImageUrl="../../sites/mysite/Style Library/custom/img/logo3.png" runat="server" />

So it seems as though the URL replacement is happening twice in those cases. Why is this happening, and is there anything I can do about it?

(The same custom master page is specified for both SPWeb.MasterUrl and SPWeb.CustomMasterUrl.)

Answer 1

For CSS you can use

<SharePoint:CssRegistration name="<% $SPUrl:-sitecollection/Style Library/custom/css/custom_v2.css" %>" runat="server"/>

For Site Logo you can use

<SharePoint:SiteLogoImage LogoImageUrl="/Style Library/AdventureWorks/logo.png" AlternateText="Back to Home" ToolTip="Back to Home" runat="server"/>

Check this http://msdn.microsoft.com/en-us/library/office/gg430141(v=office.14).aspx from more on branding

Answer 2

Ok, I'm marking Amal's answer as the correct one, since it did lead me to solving the problem. However, I wanted to add an answer of my own with a little more detail about the URL tokens, and how to use them.

I had previously run across this MSDN page on URLs and Tokens in SharePoint 2013. In it, I saw that there is a token ~sitecollection that can be used at the beginning of a URL, so I tried this:

<link href="~sitecollection/Style Library/custom/css/custom_v2.css" rel="stylesheet" type="text/css"/>
<asp:Image ImageUrl="~sitecollection/Style Library/custom/img/logo3.png" runat="server" />

That didn't work. Some kind of URL replacement was happening, but it was definitely not what I expected, and it was an invalid URL so the resources weren't getting loaded.

What they don't tell you on that page is the correct syntax for using the token, and that is this:

<% $SPUrl:~sitecollection/Path/To/Resource %>

Once I learned that was how to actually use the tokens, I implemented this:

<link href="<% $SPUrl: ~sitecollection/Style Library/custom/css/custom_v2.css%>" rel='stylesheet' type='text/css'/>
<asp:Image ImageUrl='<% $SPUrl:~sitecollection/Style Library/custom/img/logo3.png %>' runat="server" />

Which is working great. Interestingly, for script links, you have to wrap the token in an ASP literal control, so a script link using this method looks like this:

<script src='<asp:Literal runat="server" Text="<% $SPUrl:~sitecollection/Style Library/custom/js/libs/jquery-2.1.1.min.js %>" />' type='text/javascript'></script>

So, I hope that helps anyone trying to figure out how to use the URL replacement tokens.