Use Microsoft Flow to grab image of the day for SharePoint

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.

1. 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

1. 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.

2. Browse the Templates and locate the "RSS to SharePoint" template by Craig Stanley (thanks Craig!). Click "Use this template".

3. For the "When a feed item is published" URL, input your image RSS feed URL, e.g. http://feeds.feedburner.com/bingimages

1. 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:
   

1. 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. <script type="text/javascript"> var Module = {} || Module; Module.GetImages = (function () { var pub = {}, _images = [], _options = { listName: "Daily Images" }; pub.init = function () { var url = "https://yourTenant.sharepoint.com/_api/lists/getbytitle('" + listName + "')/items?$top=1&$orderby=Created desc" $.ajax({ url: url, type: "GET", headers: { "accept": "application/json;odata=verbose", }, success: function (results) { createImageView(results, listName); }, error: function (error) { console.log("Error in getting List: " + listName); $(_options.container).html("Error retrieving your " + listName + "."); } }); }; function createImageView(results, listName) { _images = results.d.results; $.each(_images, function (index, task) { var imageURL = task.Title; imageURL = imageURL.replace("http:","https:"); $('#DeltaPlaceHolderMain').css('background-image', 'url(' + imageURL + ')'); $('#DeltaPlaceHolderMain').css('background-repeat', 'no-repeat'); $('#DeltaPlaceHolderMain').css('background-position', 'center'); }); } function _onQueryFailed(sender, args) { alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace()); } return pub; }()); $(document).ready(function () { SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { Module.GetImages.init(); }); }); </script> When all is working, you're going to get a new Bing image of the day each day, as the background to your search center page: