The default Search Center in SharePoint is quite minimalist- just an empty page layout with a search box. This post will show you how to use the workflow logic of Microsoft Flow to grab a reference to the Bing image of the day, copy it’s URL to a SharePoint list, and then use clientside scripting to set the image as a background to your search center or use elsewhere in your portal.
There’s been plenty of tutorials posted over the years in terms of SP image rotaters, jazzing up search centers, etc. – the focus of this post is really more about using Flow to parse external RSS data into a SharePoint list on an ongoing basis, and then do something with that data.
1. Create the SharePoint List
In order to not have to query an external RSS feed every time a user hits a page where we want to display referenced images, we’re going to use a SharePoint list as a repository for the image links as they come in each day.
- In your SharePoint site collection of choice (in this case, i’m using the root site collection), create a new Custom List with the name “Daily Images”. There’s no extra columns or tweaks needed for this List, we’re just going to be using the OOTB Title field to store our daily image URL and that’s it.
Need help creating a List?:
-If you’re using the new SharePoint UI style (Lists, Libraries & Subsites listed on “Site Contents” page are text links), these are the instructions.
-If you’re using the legacy SharePoint UI style (Lists, Libraries & Subsites listed on “Site Contents” page are square, “metro”-style icons), follow these steps.
2. Create the Flow
- You haven’t checked out Microsoft Flow yet? Come on, get on it – it’s the future of workflow! Head on over and sign up with your Microsoft or organizational Office 365 account.
- Browse the Templates and locate the “RSS to SharePoint” template by Craig Stanley (thanks Craig!). Click “Use this template”.
- For the “When a feed item is published” URL, input your image RSS feed URL, e.g. http://feeds.feedburner.com/bingimages
- A particularity of this specific RSS feed, is that some image URL’s it was outputting (with “feedproxy” in the URL) we’re not rendering when linked to, so I used the “Add a Condition” link to create a Flow Condition that only registered image links in the RSS feed, that do not contain the string “feedproxy”. For the true part of the Condition, you’re going to have it run the Create SharePoint List Item action, using the URL of the image from the RSS feed for the Title field:
- It’ll take the flow a bit to pick up some data, so if it’s a daily RSS feed check back the next day. When it’s working and there’s no problems reported in the log, you should see some RSS image URL links showing up like so:
3. Add some script to render the images
We’re going to use Jquery and some of the SharePoint REST API to query our Daily Images list, and grab the latest image. We’re going to run with the assumption you already have your Jquery reference set up. If you don’t have Jquery in there already, you can either bake it into your page layouts (if you’re using custom branding) like this, or add a one-off reference on the page where you’re embedding this Daily Image code, like in this example.
Go to your Search Center homepage (https://yourTenant.SharePoint.com/Search by default), Edit the page, and add a Script Editor web part with the following code. It renders the latest image of the day as the CSS background image of the #DeltaPlaceHolderMain div. Note that we are doing a string replace to change the original image URL’s provided via the RSS feed, which just happened to be non-SSL http://. Since we’re displaying this image on a secure SharePoint Online page, we’re changing the http:// to https://. Bing, in this case, serves both versions happily- not all image sources may play along like this so double-check they can render https:// before committing.
This technique could be applied to any instance where there’s a list of images delivered by an RSS feed, for example:
NASA Image of the Day
Flickr daily interesting image
Wikimedia Image of the Day
For the Bing Image and any other source, make sure to check that you’re obeying the copyright & author attribution & usage requirements of the image provider – the above technique implies nothing about such nuances, it’s only intended as a technical proof of concept/demo.