Applying link with varying image to SuiteBarBranding -element across the site collection

Question

I've followed these instructions to change the default header of the SharePoint(2013)'s site.

The code I used is this:

$webApp = Get-SPWebApplication https://<intranet>
$webApp.SuiteBarBrandingElementHtml = "<div class=""ms-core-brandingText""><a href=""https://<intranet>""><img alt=""https://<intranet>/SiteAssets/Logo.png"" src=""../SiteAssets/Logo.png"" /></a></div>"
$webApp.Update()

What I tried to achieve by this is a kind of hack to have a different kind of image for each of my site across the site collection. So basically the header retrieves the image from its own SiteAssets -folder where I've placed the Logo.png. As expected, I'm only using the same name, but the image varies.

Now this works totally fine and as expected, except once I access any content of the site which has the ".../_layouts/..." -path in it. So for example once I go to site's Site settings or Site contents the image gets broken. If I follow the path of the image it shows it as ".../_layouts/SiteAssets/Logo.png" which is actually a totally blank page.

I thought this could be passed by using some kind of if -statement on Management Shell, but I haven't got it working at all - don't know if it's even possible.

My current goal is to have those broken images replaced by the default image which is located at the root, https://[intranet]/SiteAssets/Logo.png. Of course the Site settings pages could have their own logos too, but for now I'd be happy with even some sort of fix for this issue.

Also should I mention that this problems exists on My sites too. I have the My sites created as a site collection under the root web application. The paths under my sites are like this:

Broken image link: https://[intranet]/sites/SiteAssets/Logo.png

The actual path for the link: https://[intranet]/sites/my/SiteAssets/Logo.png

Answer 1

You should use /sites/my/SiteAssets/Logo.png as URL

Hope it will work for you.

Use jQuery in your master page then use below code in your master page

$( document ).ready(function() {
 var pathname = window.location.pathname;

 if (pathname.indexOf("sites") >= 0)
   $('.ms-core-brandingText img').attrib('src','/sites/my/SiteAssets/Logo1.png');
 else
   $('.ms-core-brandingText img').attrib('src','/sites/my/SiteAssets/Logo2.png');
});

I am just giving you logic how to do it.

Answer 2

Thanks Milind. Took your script into modification and managed to get it to work (almost) properly.

In the end the script became the following:

<script type="text/javascript "src="https://mypath.com/SiteAssets/jquery.min.js" </script>
<script type="text/javascript">
$( document ).ready(function() {
var pathname = window.location.pathname;

if (pathname.indexOf("_layouts") >= 0)
$('.ms-core-brandingText img').attr('src','https://mypath.com/SiteAssets/Logo.png');
else
$('.ms-core-brandingText img').attr('src','../SiteAssets/Logo.png');
});
</script>

I entered the same for the masterpage of the My Sites using sites/my at the pathname.indexOf.

Now the only parts where the header logo isn't working are pages such as mypath.com/SiteAssets, but that should be only a small fix to the code.

Once more, thanks for leading me to the right path.