Tips & Tricks

1. Check to see if the item has any attachments
2. Filter for the file extensions you wish to display
3. Create an alternate message if no pictures exist in the attachment collection

What It Looks Like

I wanted to give the end-user the ability to attach picture files to be the "previews" for a product. At the same time, I also didn't want to restrict the user from uploading non-picture files (such as PDFs, PPT, etc) in case it's needed.

Using my product detail page below, I have two chair images and a sample text file. In my process, I build out only the images and ignore the text file:

Naturally, I want to error handle this too in case there are no images present on a particular list item:

Here's How It Works

1. Query the list you're working on
2. Create a string placeholder that will be your HTML output to the page
3. Determine the existence of attachments on your list item
4. Handle that existence by writing out the IMG tag and TABLE DATA tags--OR--your alternate message, if no images exist
5. Set your HTML variable to an <asp:label> tag in the main content placeholder, but above the standard WebPart:
   
   

   
   

6. Wire up any styles as appropriate

Here's how I did it:

protected void Page_Load(object sender, System.EventArgs e)
{
 if(Request.QueryString["ID"] != "")
 {
  SPList list = SPContext.Current.Web.Lists["Manage Products"];
  SPListItem item = list.GetItemById(Convert.ToInt32(Request.QueryString["ID"]));
  string ProductImages = "";
  ProductImages += "<table width=\"100%\" class=\"ms-formtable\" cellpadding=\"3\" cellspacing=\"\"><tr>";
   if(item.Attachments.Count > 0)
   {
       foreach (string filename in item.Attachments)
       {
        if(filename.Contains(".jpg") || filename.Contains(".gif") || filename.Contains(".png"))
        {
         ProductImages += "<td align=\"center\">";
         ProductImages += "<a target=\"_blank\" href=\"" + item.Attachments.UrlPrefix + filename.ToString() + "\">";
         ProductImages += "<img border=\"0\" height=\"120\" src=\"" + item.Attachments.UrlPrefix + filename.ToString() + "\">";
         ProductImages += "</a></td>";
        }
       }
   }
   else
   {
       ProductImages += "<td width=\"100%\" class=\"ms-formlabel\" align=\"center\"><h3 class=\"ms-standardheader\">[ No product ↙
preview available ]</h3></td>";
   }
     ProductImages += "</tr></table>";
     lblProductImages.Text = ProductImages.ToString();
 }
}

Once I created the proof of concept, I ended up using the built-in WSS styles from the Form Table definition for my alternate text.

Now, every time you add another image to the list item, it just creates another cell within that table equidistantly. The only issue you might encounter is the picture order. You could probably figure another element for ordering, or you can just alphabetize the attachment names to the order you wish them to display since they are returned that way.

PS--Don't forget to change your list's default display page to the new Detail.aspx!