Solved

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

Posted on 2013-01-17
3
461 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
Comment Utility
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
Comment Utility
0
 

Author Closing Comment

by:mmalik15
Comment Utility
Great solution thanks
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Summary: Persistence is the capability of an application to store the state of objects and recover it when necessary. This article compares the two common types of serialization in aspects of data access, readability, and runtime cost. A ready-to…
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 …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now