The example 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 program makes a web page that displays the thumbnails in a table and includes the images' names and sizes.

See the previous example 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, and the code that finishes 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.

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 + "\">" +
    "</a>");
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 adds the thumbnail image, the file's name, and the file's size. See the example Format a number of bytes 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.

The following code shows how the program finishes the table.

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

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