Solved

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

Posted on 2013-01-17
3
470 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
  • 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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Suggested Solutions

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 …
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

730 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