The SharePoint search center is too corporate and boring. It makes me sad just looking at it. So I wanted to spruce it up and make it inviting and engaging to users. Well the daily Bing image is great so why not use that? Well okay let’s do it. So first is how do you get the image. Well Microsoft is nice enough to provide a XML page for the image http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US

Let’s understand it first. The variable “n” is how many days you want back, you can go back up to seven days. I only care about today’s so I use 1. The variable “mkt” is which geo-region you want, en-US is United States. There are regions for England, France, Japan and many others. I also wanted to be sure that the copyright information was included. So you will see the little (i) at the bottom. You’ll have to find your own and add it to your site.

So now we modify the search center and all of the modifications are in the default.aspx page, assuming you are using the minimal.master on your search center. You don’t need to modify the minimal.master so don’t touch it.

First let’s put the CSS and jQuery in. I’m modifing these pages in SharePoint designer. Navigate to line 21 which should be <asp:Content ContentPlaceHolderId=”PlaceHolderTitleAreaClass” runat=”server”>. In the style tag add the following styles.

#bingImage{height: 768px; width:  1366px; background-repeat:no-repeat; background-position:center; border: 1px #ccc solid; text-align:center; position:relative; min-height: 500px; min-width:  1000px; max-height: 768px; max-width:  1366px; margin:auto; top: -24px;}
#bottomControls{position:absolute; bottom: 0px; width:100%;}
#btmHolder{height: 55px; margin-bottom:4px;}
#btmPositioner{top: 20px; right:15px; position:absolute;}
#s4-mini-header{width:1366px; margin: 0 auto 0 auto; position:relative; z-index:50; top: 20px;}
.ms-sblink a:link, .ms-sblink a:visited{color:#fff;}
#s4-mini-titlearea h1{font-size:16px; position:relative; left: 35px; top: -28px; width: 100px;}
#s4-mini-titlearea .s4-mini-titlesep{display:none !important;}
#s4-mini-titlearea h2{display:none;}

Then under that add some javascript. Important note here, I am using John Chapman’s SharePoint proxy page solution to prevent the cross domain browser warning. http://sharepointproxypage.codeplex.com/. CORRECTION: Bing only proves a few different sizes and 1366×768 is one of them. It’s the size I like for my organization.

<script type="text/javascript">
    //BING URL for XML of current image
    //http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US
    $(document).ready(function(){
	var encodedURL = encodeURIComponent("http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1&mkt=en-US");
			$.ajax({
				type: "GET",
				url: "/_layouts/SharePointProxyPage/Proxy.aspx?u="+encodedURL,
				dataType: "xml",
				success: function(xml) {
					$(xml).find('image').each(function(){
			                   // current document tag
			                   var Document = $(this);
			                   var img = Document.find('urlBase').text();
			                   var copyright = Document.find('copyright').text();	
			            	//send it to the Div
			            	$("#bingImage").css("background-image","url('http://www.bing.com"+img+"_1366x768.jpg')");
			            	$("#bingCopyright").attr("title",copyright);
			        });
				},
                error: function(XMLHttpRequest, textStatus, errorThrown){alert("get image failure: " + textStatus +" | " + errorThrown);}
			});
	});
	</script>

Now go to <SharePoint:UIVersionedContent UIVersion=”4″ runat=”server”>, which should be line 200 or there abouts. Between <ContentTemplate> and <div class=”srch-sb-results7″> add <div id=”bingImage” align=”center”>. Then go to </SharePoint:UIVersionedContent> and directly under it paste the following:

</div>
	<div id="bottomControls">
		<div id="btmHolder">
			<div id="btmPositioner">
				<img id="bingCopyright" src="/Style Library/Intranet/images/intranet/header_info.png" alt="" title="">
			</div>
		</div>
	</div>

It should look something like this:

About these ads