Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-01-17
3
Medium Priority
?
492 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

609 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