Click here to Skip to main content
11,413,961 members (77,221 online)
Click here to Skip to main content

Thumbnail Images in GridView using C#

, 22 Oct 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
Thumbnail Images in GridView using C#
Screenshot - thumb.gif

Introduction

ASP.Net have the gridview which is very usefull to display such kind of some datas or images like this. Here is I'm going to display images which are in a folder with thumbnail size.

Thumbnail Image

(First of all I need a support page which is create thumbnail image. Here is I'm working with imageresize.cs. This file will help you for creating thumbnail images.

ImageResize class have some functionalities for creating thumbnail images. I'm creating thumbnail images and write the image in that supporting page. In my image viewer page I have created a grid view and give the supporting page as resolving url in every images contain's in that appropriate folder.

Using the code

In my image viewer page

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            bindData();
    }


private void bindData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("S.No", typeof(string));
        dt.Columns.Add("grdImage", typeof(string));
        DataRow dr;
        int i = 1;
        foreach (string file in Directory.GetFiles(Server.MapPath("Images")+"\\","*.jpg"))
        {
            dr = dt.NewRow();
            dr[0] = i.ToString();
            dr[1] = ResolveUrl("ThumbnailCreator.aspx?ImageId="+file);
            dt.Rows.Add(dr);
            i += 1;
        }
        grdImageViewer.DataSource = dt;
        grdImageViewer.DataBind();
    }

From this above code I'm searching images with .jpg extension in the Images folder. I'm putting row number for every image and binding the thumbnail image from ThumbnailCreator.aspx page for the appropriate image.

In ThumbnailCreator page,

protected void Page_Load(object sender, EventArgs e)
    {
        string imgPath;
        if (Request.QueryString["ImageId"] != null)
        {
            if (!string.IsNullOrEmpty(Request.QueryString["ImageId"].ToString()))
            {
                imgPath = Request.QueryString["ImageId"].ToString();
                if (!string.IsNullOrEmpty(imgPath))
                {
                    byte[] imgByte = GetImageByteArr(new Bitmap(imgPath));
                    MemoryStream memoryStream = new MemoryStream();
                    memoryStream.Write(imgByte, 0, imgByte.Length);
                    System.Drawing.Image imagen = System.Drawing.Image.FromStream(memoryStream);
                    Response.ContentType = "image/Jpeg";
                    ImageResize ir = new ImageResize();
                    ir.File = imagen;
                    ir.Height = 60;
                    ir.Width = 60;
                    ir.GetThumbnail().Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
                }
            }
        }
    }

converting image to byte array

 private static byte[] GetImageByteArr(System.Drawing.Image img)
    {
        byte[] ImgByte;
        using (MemoryStream stream = new MemoryStream())
        {
            img.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
            ImgByte = stream.ToArray();
        }
        return ImgByte;
    }

From above,the query string will be come with the path of image which is to be conver to thumbnail image. I'm creating thumbnail page using ImageResize.cs. See the ImageResize.cs file in app_code. Thumbnail image is writing in page using Response.OutputStream.

Response type is "image/Jpeg". It's must for image. This will help to write in page as jpeg file.

Hence the Image has been created thumbnail image and displayed in a gridview.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

S.Vinothkumar
Web Developer
India India
Hi Viewers,

I wish to all. This is Vinoth. This is where I try to condense everything that you need to know about me.

Blog:

visit my blog

Interests:

I'm passionate about a great many things and continually learning about the things that interest me. They are wearable computers, User Interface Design, Artificial life, Industrial music.






Comments and Discussions

 
GeneralMy vote of 1 Pin
manzoorafridi, 2-Aug-12 20:07
membermanzoorafridi2-Aug-12 20:07 
GeneralMy vote of 4 Pin
shivkumar singh, 4-Nov-11 3:45
membershivkumar singh4-Nov-11 3:45 
GeneralMy vote of 1 Pin
chartierpw, 22-Aug-10 12:56
memberchartierpw22-Aug-10 12:56 
GeneralHuge bug in this code!!! Pin
evgtun, 13-Oct-09 4:14
memberevgtun13-Oct-09 4:14 
GeneralI cannot see any images after running the application Pin
ivix4u, 3-Jun-09 19:26
memberivix4u3-Jun-09 19:26 
QuestionHow to achieve this with Windows Application? Pin
Narendra Reddy Vajrala, 26-May-09 5:58
memberNarendra Reddy Vajrala26-May-09 5:58 
GeneralMy vote of 2 Pin
rushi123456, 5-May-09 2:42
memberrushi1234565-May-09 2:42 
QuestionSir am getting error what to do..? Pin
janeshh, 13-Feb-08 20:01
memberjaneshh13-Feb-08 20:01 
QuestionWhy not a handler? Pin
Dmitry Salko, 22-Oct-07 23:29
memberDmitry Salko22-Oct-07 23:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150427.2 | Last Updated 22 Oct 2007
Article Copyright 2007 by S.Vinothkumar
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid