Step 1 - Create your images
As indicated above, create the images you want to rotate. For me, I found a plethora of quotes, and placed a quote on an image that was a picture of a room, hallway, or somewhere else in our building*. In the end, I wound up with 27 different images, looking similar to the following.
The key item here is that you probably want every image to be the same size. In the end, I had a 300x200 jpg, and then added some whitespace below it to add a quote, so when all was said and done, each image is 300x283.
Finally, you also want to name your images consistently. So name the images 01.jpg, 02.jpg... 24.jpg.
Step 2 - Write some code
In principle, all I wanted was to show an image. I didn't it to randomly load each time, because some of my users are mobile users, and I didnt want to eat up useless bandwidth. Plus, I didn't want to randomly load an image periodically.. if I made 27 of these things, I wanted them to cycle through appropriately. In the end, all I did was:
- Create a text file that stores the value of the last image that was shown
- Store an image file name in server cache that expires
- Set a parameter that indicates what the "last" image is in our rotation
In the code behind, I used the following code in the page_load
As stated above, all this code is doing is reading the current value of an http cached item. If that value isn't null, then the item hasnt expired yet. If it is null, We read a line in a text file to determine what the "last" image was that was displayed. We then increment that number by 1, add that value to our cache, update our text file to reflect the current files image name, and write the image out to the page. The last line here is of the most importance though.. we also set cache of the response object to none... this way, the users web browser doesn't cache the result. If it does so, then the image would never update on their PC, unless they performed a hard refresh or cleared out their browsers temporary items.
Thirdly, in your web root, create a text file called "lastimg.txt". In that file, enter the term "01", save and close the file. Now, when you run the project, the application thinks that the last image displayed to a user via cache was 01.
Now, you might be thinking.. do I specify a cache timeout? Or what about a jpeg extension? Or how do I know when I got to my last image!? Have no fear, the web.config is here. Add these items to your web.config:
<add key="maxFile" value="27"/>
<add key="fileType" value="jpg"/>
<add key="expTimeMinutes" value="60"/>
These items are already included in the logic from the code displayed above. MaxFile is the last file that you have in your rotation (so if you only have 12 images, this value would be 12.. and so on). FileType is your image file type, all mine were jpg, so I stored this value as such. expTimeMinutes is the amount of time an image will be cached for, before rotating to the next item.
Step 3 - Host It!
Go ahead and run\debug your application. When you see it working, go ahead and deploy this piece of modern artistry. Just make sure that the user the application is running as has write access to the lastimg.txt file, so it can update it as it runs.
Once deployed, in SharePoint, create a new Image Web Part. In the properties, for the Image link, just link to your application's <whatever_you_called_it>.aspx page, and click OK. Now, your images will display in your Intranet site!
*Someone in our building took hi-res photo's of our boardroom, front lobby, etc. I took these images, popped up in PhotoShop, and used one\two of the filters to give the pictures a unique effect, such as an oil painting feel, or a colored pencil drawing.
