Solved

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

Posted on 2013-01-17
3
475 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 500 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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
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…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…

689 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