ShowImages: a usercontrol to display your web images

• Download source files - 9.73 Kb
• Download demo project - 302 Kb

Introduction

ShowImages is a simple user control built to facilitate the display of your images/photos stored on a web server.

Using the code

ShowImages is a simple user control built to facilitate image display. To see how this user control really works, please visit my site.

ShowImages shows thumbnails, generated by the page getThumbnail.aspx (included in the project), using a DataList. Using ShowImages properties, it is possible set up the Item DataList, and width and height of thumbnails.

Properties of ShowImages are displayed in the following code:

    // font properties
    // specify font family names (comma separated)
    // i.e.: verdana,serif
    // Arial Narrow,verdana
    public string FontName
    {
        set
        {
            fontName = value;
        }
    }

    // specify font size property
    // ie: 10px
    // xx-small
    public string FontSize
    {
        set
        {
            fontSize = value;
        }
    }

    public Boolean FontBold
    {
        set
        {
            fontBold = value;
        }
    }

    // thumbnails
    // height and width
    public int ThumbsHeight
    {
        set 
        {
            thumbnailHeight = value;
        }
    }

    public int ThumbsWidth
    {
        set 
        {
            thumbnailWidth = value;
        }
    }

    // decide how many columns must
    // have the image datalist
    public int Columns
    {
        set
        {
            columns = value;
        }
    }

    // set directory where to find images
    public string DefaultDir
    {
        set
        {
            imagespath = value;
        }
    }


    // set search pattern
    // multiple pattern must be separated by ";"
    // i.e.: *.jpg;*.gif
    public string SearchPattern
    {
        set
        {
            string [] split = null;

            split = value.Split(';');

            foreach (string s in split)
            {
                searchPatternList.Add(s);
            }
        }
    }

ShowImages uses the DefaultDir property to start to navigate inside your image directories. It shows images filtered by the SearchPattern property; if sub-directories are present, ShowImages shows folder entries so you can navigate them.

The following function fills the DataList with images' data.

    /// <SUMMARY>
    /// BuildImagesList
    /// create the image list and
    /// fill the datalist
    /// <PARAM />
    /// </SUMMARY>
    private void BuildImagesList()
    {
        // Create new DataTable objects.
        DataTable myDataTable = new DataTable();
        // Declare DataColumn and DataRow variables.
        DataColumn myColumn;
        DataRow myRow; 

        // Create new DataColumn, set DataType,
        // ColumnName and add to DataTable.    
        myColumn = new DataColumn();
        myColumn.DataType = System.Type.GetType("System.String");
        myColumn.ColumnName = "filename";
        myDataTable.Columns.Add(myColumn);

        // Create second column.
        myColumn = new DataColumn();
        myColumn.DataType = Type.GetType("System.Int32");
        myColumn.ColumnName = "type";
        myDataTable.Columns.Add(myColumn);


        physicalpath = Server.MapPath(imagespath);

        string[] dirList;
        try
        {
            dirList = Directory.GetDirectories(physicalpath);

            // it's a subdir of default dir
            // so I add a link to parent folder
            if (! isMainDir)
            {
                myRow = myDataTable.NewRow();
                myRow["filename"] = getParentDirName(imagespath);
                myRow["type"] = 0; 
                myDataTable.Rows.Add(myRow);
            }

            foreach (string s in Directory.GetDirectories(physicalpath))
            {
                myRow = myDataTable.NewRow();
                myRow["filename"] = addFolderToString(imagespath, 
                                            Path.GetFileName(s));
                myRow["type"] = 1; // directory
                myDataTable.Rows.Add(myRow);

            }

            for (int i=0; i < searchPatternList.Count; i++)
            {
                foreach (string s in Directory.GetFiles(physicalpath, 
                         searchPatternList[i].ToString()))
                {
                    myRow = myDataTable.NewRow();
                    myRow["filename"] = addFolderToString(imagespath, 
                                                Path.GetFileName(s));
                    myRow["type"] = 2; // file
                    myDataTable.Rows.Add(myRow);

                }
            }
            DataView sortedView = new DataView(myDataTable);
            sortedView.Sort = "type, filename asc";

            dlImages.RepeatColumns = columns;
            dlImages.DataSource = sortedView; 
            dlImages.DataBind();

            sortedView = null;
            myDataTable = null;
        }
        catch (Exception ex)
        {}
        finally
        {}

    }

User control DataList has the following item template:

    ...
    <ItemTemplate>
        <br>
        <a
        href="" runat= "server" id= "imgLink"><img runat="server" border="0" 
                id="imgThumbnail" align="middle">
        </a>
        <br>
        <asp:Label Runat="server" ID="imgName" Font-Bold="True" ></asp:Label>
    </ItemTemplate>
    ...

Which is filled with correct data using the ItemDataBound event:

    /// <SUMMARY>
    /// map ItemDataBound events to format
    /// correctly items
    /// </SUMMARY>
    /// <RETURNS></RETURNS>
    private void dlImages_ItemDataBound(Object sender, 
            System.Web.UI.WebControls.DataListItemEventArgs e)
    {
        System.Web.UI.HtmlControls.HtmlImage img = null;
        System.Web.UI.HtmlControls.HtmlAnchor imgLink = null;
        System.Web.UI.WebControls.Label imgName = null;

        //make sure this is an item in the data list (not header, ecc.)
        if ( (e.Item.ItemType == ListItemType.Item) ||
            (e.Item.ItemType == ListItemType.AlternatingItem) )
        {
            // get a reference to the image, link and label
            img = (System.Web.UI.HtmlControls.HtmlImage)
                  (e.Item.FindControl("imgThumbnail"));
            imgLink = (System.Web.UI.HtmlControls.HtmlAnchor)
                      (e.Item.FindControl("imgLink"));
            imgName = (System.Web.UI.WebControls.Label)
                      (e.Item.FindControl("imgName"));

            // if necessary set label font
            imgName.Font.Bold = fontBold;
            if ( fontName.Length > 0)
            {
                imgName.Font.Names = fontName.Split(',');
            }
            if (fontSize.Length > 0)
            {
                FontUnit fu = new FontUnit(fontSize);
                imgName.Font.Size = fu;
            }

            if ((((System.Data.DataRowView)
                  (e.Item.DataItem))[1]).ToString() == "0")
            {
                // format parent directory item
                imgLink.HRef = Request.Url.AbsolutePath + "?path=" + 
                  (((System.Data.DataRowView)(e.Item.DataItem))[0]).ToString();
                img.Src = "cartella.bmp";
                imgName.Width = thumbnailWidth;
                imgName.Text = "..";
                img.Alt = "Come back to parent folder";
            }
            else if ((((System.Data.DataRowView)
                       (e.Item.DataItem))[1]).ToString() == "1")
            {
                // format directory items
                imgLink.HRef =  Request.Url.AbsolutePath  + "?path=" + 
                  (((System.Data.DataRowView)(e.Item.DataItem))[0]).ToString();
                img.Src = "cartella.bmp";
                imgName.Text = getFileName((((System.Data.DataRowView)
                                           (e.Item.DataItem))[0]).ToString());
                img.Alt = "Click to explore dir\n" + imgName.Text;
            }
            else
            {
                // format file items
                imgLink.HRef = 
                  (((System.Data.DataRowView)(e.Item.DataItem))[0]).ToString();
                imgLink.Target = "_balnk";
                img.Src = "getThumbnail.aspx?img=" + 
                    (((System.Data.DataRowView)(e.Item.DataItem))[0]).ToString() + 
                    ((thumbnailHeight>0)?"&height="+ 
                      thumbnailHeight.ToString():"") + 
                    ((thumbnailWidth>0)?"&width="+ 
                      thumbnailWidth.ToString():"");
                imgName.Text = getFileName((((System.Data.DataRowView)
                                           (e.Item.DataItem))[0]).ToString());
                img.Alt = "Click to zoom\n" + imgName.Text;
            }
        }
    }

Using the user control is very easy. You have to insert a Register directive, and a code like the following, in your aspx page.

    ...
    <uc1:ShowImages id="ShowImages1" runat="server" 
        ThumbsHeight="100" ThumbsWidth="170" FontBold="false"
        FontSize="xx-small" FontName="verdana" 
        SearchPattern="*.jpg;*.gif" DefaultDir="/webimages">
    </uc1:showimages>
    ...

Note

Source code includes a Visual Studio Solution named "webalbum". Unzip it in your hard disk and create a web site, on port 8081, pointing to webalbum directory. That's all.

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