none
how to change header image with js in master page RRS feed

  • Question

  • Hello,

    We want to chage ribbon images dynamically on each page on our SharePoint 2013 site. we only have 4 custom pages in our site for now.

    below is my idea of implementation. But i just don't know how to do it. Kindly help me with a piece of js code if possible.

    Idea is to save images with names similar as the page name. For example, if page name is charity.asps, then we will have an image saved in site assets ( in images folder) with the name charity.png that will replace the image in top ribbon.

    Also there needs to be a if-else condition that checks if there is no image available with that page name, then display some selected generic image, say generic.png. So basically this will cater to applicaiton pages.  

    I'm a novice to javascript. I need to put this in masterpage. Please help with your expertise.

    Thank you in advance. 

    prajK

    Friday, April 21, 2017 6:00 AM

Answers

  • Hi,

    The following code about changing the site logo in 4 custom pages dynamically for your reference.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {   
    	var url = window.location.href;
    	if (url.indexOf("charity.aspx") > 0) {
    		$(".ms-siteicon-img").attr("src","/SiteAssets/images/charity.png");		
    	}
    	if (url.indexOf("charity1.aspx") > 0) {
    		$(".ms-siteicon-img").attr("src","/SiteAssets/images/charity1.png");		
    	}
    	if (url.indexOf("charity2.aspx") > 0) {
    		$(".ms-siteicon-img").attr("src","/SiteAssets/images/charity2.png");		
    	}
    	if (url.indexOf("charity3.aspx") > 0) {
    		$(".ms-siteicon-img").attr("src","/SiteAssets/images/charity3.png");		
    	}
    });
    </script>

    Add the code into <head/> in master page using SharePoint designer.

    To find your ribbon images html code, we can use IE F12 developer tools, then modify the code above to make it works.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Sunday, April 23, 2017 7:42 AM
    Moderator
  • Hi

    another easiest approach

    Put in your master page all you images - all 4

    In each page use custom css style to hide all other unwanted 3 pictures


    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Marked as answer by John.P.Smith Monday, April 24, 2017 3:47 PM
    Friday, April 21, 2017 7:54 AM

All replies

  • Hi

    another easiest approach

    Put in your master page all you images - all 4

    In each page use custom css style to hide all other unwanted 3 pictures


    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Marked as answer by John.P.Smith Monday, April 24, 2017 3:47 PM
    Friday, April 21, 2017 7:54 AM
  • Hi,

    The following code about changing the site logo in 4 custom pages dynamically for your reference.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {   
    	var url = window.location.href;
    	if (url.indexOf("charity.aspx") > 0) {
    		$(".ms-siteicon-img").attr("src","/SiteAssets/images/charity.png");		
    	}
    	if (url.indexOf("charity1.aspx") > 0) {
    		$(".ms-siteicon-img").attr("src","/SiteAssets/images/charity1.png");		
    	}
    	if (url.indexOf("charity2.aspx") > 0) {
    		$(".ms-siteicon-img").attr("src","/SiteAssets/images/charity2.png");		
    	}
    	if (url.indexOf("charity3.aspx") > 0) {
    		$(".ms-siteicon-img").attr("src","/SiteAssets/images/charity3.png");		
    	}
    });
    </script>

    Add the code into <head/> in master page using SharePoint designer.

    To find your ribbon images html code, we can use IE F12 developer tools, then modify the code above to make it works.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Sunday, April 23, 2017 7:42 AM
    Moderator
  • Thanks Dennis. Appreciate your help. This was very helpful. 
    Monday, April 24, 2017 3:48 PM
  • Thanks Romeo. I will try this option. 
    Monday, April 24, 2017 3:49 PM