Make an HTML table of thumbnail images in C#

[Make an HTML table]

The post Make thumbnails and a web page to display the images in a directory in C# shows how to make thumbnails for the images in a directory and then build a web page to display them. There are lots of ways you could modify that example. This example shows how to make an HTML table that holds thumbnails and the images’ names and sizes.

See the previous post for a description of the basic approach. This example differs from that one in three places:

  • The code that starts the web page’s table
  • The code that displays a thumbnail
  • The code that finishes the table

Starting the Table

The following code shows how the program starts the web page’s table. This code is executed before the program starts looping through the image file names.

// Start the table.
html_file.WriteLine("<table width=\"100%\" border=\"1\">");

// Start the table's first row.
html_file.WriteLine("  <tr>");

// Keep track of the number of images in a row.
const int thumbs_per_row = 4;
int thumbs_this_row = 0;

This code creates the HTML table tag and starts a new row with a tr tag. It also initializes the thumbs_this_row counter that keeps track of the number of thumbnails in the table’s current row.

Making an Entry

The following code shows how the program builds a table entry for a thumbnail.

// See if we need to start a new row.
if (++thumbs_this_row > thumbs_per_row)
    thumbs_this_row = 1;
    html_file.WriteLine("  </tr>");
    html_file.WriteLine("  <tr>");

// Add the thumbnail, the file's name, and its size.
html_file.WriteLine("    <td align=\"center\">");
html_file.WriteLine("      " +
    "<a href=\"" + url_prefix + image_fileinfo.Name + "\">" +
    "<img src=\"" + url_prefix + thumb_fileinfo.Name + "\">" +
html_file.WriteLine("      <br>");
html_file.WriteLine("      " + image_fileinfo.Name);
html_file.WriteLine("      <br>");
html_file.WriteLine("      (" +
    image_fileinfo.Length.ToFileSizeApi() + ")");
html_file.WriteLine("    ");

This code first increments thumbs_this_row. If the new value is greater than thumbs_per_row (4 in this example), the program closes the current HTML tr tag and starts a new one to begin a new row.

Next the code creates the entry for the thumbnail. It starts with a td tag and then adds the thumbnail image, the file’s name, and the file’s size. See the post Format file sizes in KB, MB, GB, and so forth in C# for information on how the ToFileSizeApi extension method works. The code finishes this part by closing the td tag.

Finishing the Table

The following code shows how the program finishes the table.

// End the table's final row and the table.
html_file.WriteLine("  </tr>");

This code simply closes the table’s final row and then closes the table.

You can modify the code in other ways to fit your web site. For example, you can make more or fewer thumbnails per row, give the table a background color, make the thumbnails bigger, add menus and other decorations on the web page, and so forth.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in files, html, image processing, internet, web and tagged , , , , , , , , , , , , , . Bookmark the permalink.