?
Solved

how to create thumbnails of images in a grid in c#

Posted on 2013-01-17
3
Medium Priority
?
481 Views
Last Modified: 2013-01-24
i have a list of images in folder. I want to show all the images in thumbnails in a grid and then create pop up links for the actual images. Any ideas which control would be best to make this kind of grid in asp.net c# and any code examples
0
Comment
Question by:mmalik15
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 total points
ID: 38788646
There are a number of ways to do this, but for me the first thought goes to a Repeater with elements being a floating div. Inside that would be the image which can be a real thumbnail image (if you already have that), or a direct link to the image (but that would make the page very slow to load), or as demonstrated below a data uri. Most browsers seem to support it: http://caniuse.com/datauri .

So here's some example code.

file imgs.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="imgs.aspx.cs" Inherits="EE_Q_27998716.imgs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> EE Q_27998716 </title>
    <style type="text/css">
        div.imageDiv {
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid Black;
            margin: 5px;
            padding: 5px;
            text-align: center;
            overflow: hidden;
            color: Black;
            background-color: Silver;
            font-family: Verdana;
            font-size: 8pt;
        }
        img {
            border: 5px solid White;
            margin-bottom: 3px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <a href="<%#Eval("filename") %>" target="_blank">
                    <div class="imageDiv">
                        <img src="data:image/jpg;base64,<%#Eval("thumbnail") %>" alt="<%#Eval("filename") %>" title="<%#Eval("filename") %>" width="64" height="64" />
                        <br />
                        <%#Eval("filename") %>
                    </div>
                </a>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

Open in new window

file imgs.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;
using System.IO;

namespace EE_Q_27998716
{
    public partial class imgs : System.Web.UI.Page
    {
        string imageFolder = ".";

        protected void Page_Load(object sender, EventArgs e) {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("filename", typeof(String)));
            dt.Columns.Add(new DataColumn("thumbnail", typeof(String)));
            foreach (string f in Directory.GetFiles(Server.MapPath(imageFolder), "*.jpg", SearchOption.AllDirectories)) {
                string fn = f.Substring(f.LastIndexOf('\\') + 1);
                dt.Rows.Add(imageFolder + '/' + fn, GetThumbnailImage(f));
            }
            Repeater1.DataSource = dt;
            Repeater1.DataBind();
        }

        public string GetThumbnailImage(string imageName) {
            using (System.Drawing.Image image = System.Drawing.Image.FromFile(imageName)) {
                using (System.Drawing.Image thumbnail = image.GetThumbnailImage(64, 64, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallBack), IntPtr.Zero)) {
                    using (MemoryStream imageStream = new MemoryStream()) {
                        thumbnail.Save(imageStream, System.Drawing.Imaging.ImageFormat.Jpeg);
                        byte[] imageContent = new Byte[imageStream.Length];
                        imageStream.Position = 0;
                        imageStream.Read(imageContent, 0, (int)imageStream.Length);
                        return Convert.ToBase64String(imageContent);
                    }
                }
            }
        }

        public bool ThumbnailCallBack() {
            return true;
        }
    }
}

Open in new window

0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38788913
0
 

Author Closing Comment

by:mmalik15
ID: 38813701
Great solution thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
Suggested Courses
Course of the Month8 days, 12 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question