There are times when people want to rotate a picture on a social networking site like Face book, MySpace, or just as a blog signature, but the restrictions are such that when you are allowed to specify an image, you have to enter a URL to an image and the content-type must be set to “image/gif.” So, how do we get around these limitations and still allow a random image to be shown? Read on.
Say we are a subscriber to a blog and we want our signature to show a random image. This is useful if, for example, you want to change the message so that whenever someone reads your responses or refreshes your MySpace page they get a new and random image. For our example, we are going to show a random smiley to indicate our random mood. Again, these images can be of anything.
First thing we need to do is create our images. It is best to keep them the same size and format, as this will make the C# coding a little easier. You should also name the images a common name and only change a number at the end of the filename to make them unique. For example, the nine images at left can be numbered emotion1.gif, emotion2.gif, emotion3.gif, etc.
Once we have the images, place them in the image folder of your website (ex: /images). Now it’s time to create the ‘page’ that can be used as a redirect to download the image in place of an actual image name.
In Visual Studio, create a new .ASPX page and corresponding code page. The .ASPX page is irrelevant, it is simply a placeholder. Therefore, it should be left basic as generated by Visual Studio
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetEmotion.aspx.cs" Inherits="GetEmotion" %>
2:
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4:
5: <html xmlns="http://www.w3.org/1999/xhtml" >
6: <head runat="server">
7: <title></title>
8: </head>
9: <body>
10: <form id="form1" runat="server">
11: <div>
12: </div>
13: </form>
14: </body>
15: </html>
The actual downloading of the random image happens in the C# code-behind. Basically it generates a random number and appends it to the filenames available. That file is then downloaded as if it were an image and setting the content-type to “image/gif.”
1: using System;
2: using System.Data;
3: using System.Configuration;
4: using System.Collections;
5: using System.Web;
6: using System.Web.UI;
7: using System.Web.UI.WebControls;
8: using System.Web.UI.WebControls.WebParts;
9: using System.Web.UI.HtmlControls;
10: using System.IO;
11:
12: public partial class GetEmotion : System.Web.UI.Page
13: {
14: protected void Page_Load(object sender, EventArgs e)
15: {
16: DownloadSig();
17: }
18:
19: private void DownloadSig()
20: {
21: Response.Clear();
22: Response.Buffer = false;
23: Response.AppendHeader("Content-Type", "image/gif");
24: Response.Flush();
25: int bufferSize = 8192;
26: byte[] buffer = new byte[bufferSize];
27: long byteCount;
28: Random rNext = new Random(DateTime.Now.Millisecond);
29: int iRandom = 0;
30: while (iRandom < 1 || iRandom > 9)
31: iRandom = rNext.Next(1, 10);
32: using (FileStream fs = File.OpenRead(Server.MapPath("~/") + "/images/emotion" + iRandom.ToString() + ".gif"))
33: {
34: while ((byteCount = fs.Read(buffer, 0, buffer.Length)) > 0)
35: {
36: if (Response.IsClientConnected)
37: {
38: Response.OutputStream.Write(buffer, 0, buffer.Length);
39: Response.Flush();
40: }
41: else
42: {
43: return;
44: }
45: }
46: }
47: }
48: }
What happens is that when the page is loaded, the OnLoad function calls DownloadSig(), which generates a random number between 1 and the number of images we have to choose from. It then manually sets the content-type, opens the binary file, and returns the raw image data just as if the page was calling a .gif directly.
But wait, there’s more! We are missing one important step. If the site we are trying to add the image to only allows graphic file formats to be entered (like http://www.mysite.com/images/getemotion.gif), then how do we point them to http://www.mysite.com/GetEmotion.aspx? The answer was addressed in a previous post… URL redirect!
In IIS Manager, select the website that will be hosting the random emotion generator files (GetEmotion.aspx and GetEmotion.aspx.cs). Select the “URL Rewrite” under the IIS section for that site.
Select the”Matches Pattern” option and set the pattern to “^images/getemotion.gif.” This tells URL Rewrite to look for all requests that have the string “images/getemotion.gif” in the URL. If found, we are going to re-route that request to our Redirect URL, GetEmotion.aspx.
Set the Redirect Type to temporary (I’m not sure why, but this is how I got it to work).
Now you are set to go! Whenever you sign up for a blog or want to include this random image on a website post or social networking site, just enter http://www.mysite.com/images/getemotion.gif and the random image will be displayed, and the hosting website is none the wiser.
If you are looking for further instructions on setting up URL Rewrite in IIS, see the post titled IIS7 And URL Rewrite Reveals The Tricks Of Heavy Hitter Blog Sites.
Subscribe