Photos Image Control Version 2

Thursday, 24 April 2008 16:31 by Frimbob

Earlier I created a custom User control , to fill a gab in the blog framework I am currently using. This user control read a assigned directory for subdirectories containing image files (JPG). This control would print category out onto the one screen.

While this was useful for a small number of images it obviously is not sufficient for future use. I learnt a lot about user controls then and applied this new knowledge in creating version 2

new controls ouput
Figure 1 Example of Version 2

Version 2 needed another layer,as you can see in the above image. Each folder is a category and I decided that I would not support subcategories of categories, this meant that I only required an extra menu.

Other Requirements

An option would be needed to set the number of Images per row.
CSS defaults would be Necessary as well as an option to turn them off
CSS Classes would need to be defined if defaults where turn off
Use the existing thumbnail httphandler.
Cross browser CSS consistency (lacking from version 1)
Written in C# (Version one was in VB)
Turn off the initial Category view off and just print every photo found.
Use the light box extension included with the blog framework

File Download Here
PhotoGallery.zip (6.27 kb)

Instructions

This control was developed for BlogEngine.NET however it should work on any ASP.net 2.0 page this control also uses a httpHandler to create image thumbnails also included in the download. Currently only supports JPG file extensions.

Unzip the files to the "Your_blog_root"/User controls/.. folder.

The control can be implemented using BlogEngine user-control injection feature.

Create a new page or post open end mode on a new line type [ ]
type the following between the two brackets[]- usercontrol: ~/User controls/Photo2.ascx; PhotoDirectory=~/Photos/; NumberPerRow=3; NumberCatPerRow=2; ShowCategories=True;
Ensure that no html is present between the [] tags.
Each proeprty should end in';'.

There are 2 views both are shown below, the view on the left Will be referred to as the ' Category View'. The screen shot on the right will be referred to as the 'Item View' .

Supported Properties

PhotoDirectory : path in string to the root folder where the images are stored default is "~/Photos/"
NumberPerRow: Number of Images per row in the Item View e.g 5.
NumberCatPerRow: Number of Images per row in the Category View e.g 2.
ShowCategories: Bool (True/False) , Turn on or off Category View.
CSSDefaults: Use the built in CSS Defaults.
CatCellPadding: Category View cell padding, cant be set by css class.
CatCellSpacing: Category View cell Spacing, cant be set by css class.
ItemCellPadding: Item View cell padding, cant be set by css class.
ItemCellSpacing: Item View cell Spacing, cant be set by css class.

CSS Classes

CatagoryView

PhotosTable - Table element;
photoCatagoryLabel - Label Element inside the cell
photoCatagoryLabelImage - image element inside the cell
PhotosTableRow - Row Element inside each row.

Item View

ItemTableLabel -Label at the top of the Item View
ItemTable - Table element
Itemhyp - hyperlink which the image is a child of
ItemCellImage - cell image.
ItemNewbtn - return to previous view button

Code Critique

This section is for other developer and potential employers 'wink wink'. Below I will present the code I created for this control and attempt to justify its existence. this will following in a class breakdown, then my method.

Why use this control? I wanted to spend a little time answering this one question, While there exist others for BlogEngine.Net , this control is less high tech than other controls that use Silver-Light or a re Java-Script heavy. This control should be considered to be the minimum that should be provided in the absence of scripting. Silver-Light, Flash and AJAX photo gallery's are simply just better looking but there always is a person who cant get the plusgins or have script access.

This control while having a script element (lightbox) if turned off it will still achieve its aim of displaying images, and creating folders full of jpg's is quick and easy with any ftp tool.

Class Layout

This control consists of 3 Classes

Class aphotoCatagory - this represent a single category and is instanced multiple times in a collection.
Class PhotoData - this class is a wrapper for a collection of aphotoCatagory objects, it also handles creation of this collection through File IO interaction.
Class User_controls_Photo2 - this class contains the display methods and event handlers.

In essence we have object which represent a folder another object that represents a collection of folders and an object to represent the User Interface. Its a rather group of objects

Can we have multiple user controls on a single page and the answer is Yes each user control is and individual namespaces that is not accessible through normal means to the container page. You can think off classing wrapped in a User Control as private unless changed.

aphotoCatagory

public class aphotoCatagory

{

    #region declarations

    //catagory name

    public String Cname;

    public String Cpath;

    #endregion

  

    #region Private

    private List<string> Cpaths = new List<string>();

    #endregion

  

    #region  Public

    public bool Add(string str)

    {

        Cpaths.Add(str);

        if (Cpaths.Contains(str))

        {

            return true;

        }

        else

        {

            return false;

        }

  

    } //end of add

  

    public bool remove(string str)

    {

  

        if (Cpaths.Remove(str))

        {

            return true;

        }

        else

        {

            return false;

        }

  

    }//end of remove

  

    public int count()

    {

        return Cpaths.Count;

  

    }//end of cound

  

    public string getItem(int item)

    {

        if (item < Cpaths.Count && item >= 0)

        {

            return Cpaths[item];

  

        }

        else

        {

            return "No item found at this index";

        }

  

    } //end of getitem

    #endregion

  

}//end if aphotoCatagory

The methods are very simple there is a Count() to number of files found, getItem() which return the path of a file , and add() and remove() methods to manipulate the files in the collection. This class has 2 properties a Name and a Cpath which is unused at the current time.

Class PhotoData

public class PhotoData

{

    #region Declarations and properties

  

    //the directory that holds the photos

    private List<aphotoCatagory> CatagoryLists = new List<aphotoCatagory>();

  

    private String _PhotoDirectory;

    #endregion

  

    #region Private Class Methods

    private void makeCatagoryList(string PhotoDirectory)

    {

        try

        {

            if (Directory.Exists(HttpContext.Current.Server.MapPath(PhotoDirectory)))

            {

                string[] aryDirectories = 

                Directory.GetDirectories(HttpContext.Current.Server.MapPath(PhotoDirectory));

  

                string[] files;

                string[] ExclusionDirectories = { "_vti_cnf", "_vti_pvt", "_vti_script" };

  

                //test for front page extensions and remove them

                for (int i = 0; i < aryDirectories.Length; i++)

                {

                    //test for folder with _vt_cnf , _vt_pvt _vti_script

                    foreach (string j in ExclusionDirectories)

                    {

  

                        if (aryDirectories[i].Contains(j))

                        {

                            aryDirectories[i] = "";

                        } //end if

                    } //end for each

                } //end for

                int ab = aryDirectories.Length;

  

                //test for condition that no subfolders found

                if (aryDirectories.Length == 1 && aryDirectories[0] == "")

                {

                    files = Directory.GetFiles(HttpContext.Current.Server.MapPath(PhotoDirectory));

                    if (files.Length >= 1) //if not empty

                    {

                        aphotoCatagory cat = new aphotoCatagory();

                        string keyname = returnCatagoryName(HttpContext.Current.Server.MapPath(PhotoDirectory));

                        cat.Cname = keyname;

                        cat.Cpath = HttpContext.Current.Server.MapPath(PhotoDirectory);

                        PhotoItems(keyname, ref cat, false); // fill the object up

                        CatagoryLists.Add(cat); //add the catagory to the list;   

                    } //end if  

  

                }

                else

                {

                    for (int i = 0; i < aryDirectories.Length; i++)

                    {

                        files = Directory.GetFiles(aryDirectories[i]); //test for empty directories

                        if (files.Length >= 1) //if not empty

                        {

                            aphotoCatagory cat = new aphotoCatagory();

                            string keyname = returnCatagoryName(aryDirectories[i]);

                            cat.Cname = keyname;

                            cat.Cpath = aryDirectories[i];

                            PhotoItems(keyname, ref cat, true); // fill the object up

                            CatagoryLists.Add(cat); //add the catagory to the list;   

                        } //end if

                    }//end for

                }//end if

  

            }//end if

        }

        catch

        {

            //just produce null wont crash the Web application

        }

    } //end of makeCatagoryList()

  

    private void PhotoItems(string key, ref aphotoCatagory cat, Boolean subs)

    {

        string[] aryDirectories = null;

        string keys;

  

        //combine the relative path and the key Catagory Name: 'Play'

        if (subs)

        {

            keys = Path.Combine(_PhotoDirectory, key);

  

            //get the files in the directory returns c:\\Directory\\Directory\\Directory\\Directory\\FileName.jpg'

            //use mappath change our relative path to application root.

            aryDirectories = Directory.GetFiles(HttpContext.Current.Server.MapPath(keys), "*.jpg");

  

            //make the path relative not the full c:\\Directory\\Directory\\Directory\\Directory\\FileName.jpg'

            for (int i = 0; i < aryDirectories.Length; i++)

            {

                //return a file name from the full path e.g 'image01.jpg'

                string str = Path.GetFileName(aryDirectories[i]);

                //combine our relative path and with the catagory name.

                string temp = Path.Combine(_PhotoDirectory, this.returnCatagoryName(aryDirectories[i]));

                //combine the filename and the relative path (cant use path.combine)

                aryDirectories[i] = temp + '/' + str;

                cat.Add(aryDirectories[i]);

            } //end for

        }

        else

        {

            keys = _PhotoDirectory;

  

            //get the files in the directory returns 

            //c:\\Directory\\Directory\\Directory\\Directory\\FileName.jpg'

            //use mappath change our relative path to application root.

            aryDirectories = Directory.GetFiles(HttpContext.Current.Server.MapPath(keys), "*.jpg");

  

            //make the path relative not the full 

            //c:\\Directory\\Directory\\Directory\\Directory\\FileName.jpg'

            for (int i = 0; i < aryDirectories.Length; i++)

            {

                string str = Path.GetFileName(aryDirectories[i]);

                aryDirectories[i] = Path.Combine( _PhotoDirectory , str); 

                cat.Add(aryDirectories[i]);

            } //end fir

        

        }//end if

        

  

    } //end of PhototItrms

  

    #endregion

  

    #region public Methods

    public int count()

    {

        return CatagoryLists.Count;

    }

  

    public string returnCatagoryName(string dpath)

    {

  

        string[] nameary; //temp var

        nameary = dpath.Split(Path.DirectorySeparatorChar);

        string CatName = null;

        

        if (Path.HasExtension(dpath))

        {

            CatName = nameary[nameary.GetUpperBound(0) - 1];

        }//end if

        else

        {

            CatName = nameary[nameary.GetUpperBound(0)];

        }//end else

        return CatName;

    } //end of returnCatagoryName

  

  

    public aphotoCatagory getItem(int item)

    {

        if (item < CatagoryLists.Count && item >= 0)

        {

            return CatagoryLists[item];

  

        }

        else

        {

            return null;

        }

  

    } //end of getitem

  

    #endregion

  

    #region constructor

    public PhotoData(string directory)

    {

        _PhotoDirectory = directory; //set the state variable

        makeCatagoryList(_PhotoDirectory);  //fill the dictionary object

  

    }

    #endregion

  

} //end of class

You will notice that each category is stored into a List<aphotoCatagory> objected call CatagoryLists. The other methods in the class are concerned with scanning directories for images an building the datastructure.

You may notice the following code:-

   1: private void makeCatagoryList(string PhotoDirectory)

   2:     {

   3:         //code remove for bevity

4:

   5:     string[] ExclusionDirectories = { "_vti_cnf", "_vti_pvt", "_vti_script" };

6:

   7:                 //test for front page extensions and remove them

   8:                 for (int i = 0; i < aryDirectories.Length; i++)

   9:                 {

  10:                     //test for folder with _vt_cnf , _vt_pvt _vti_script

  11:                     foreach (string j in ExclusionDirectories)

  12:                     {

13:

  14:                         if (aryDirectories[i].Contains(j))

  15:                         {

  16:                             aryDirectories[i] = "";

  17:                         } //end if

  18:                     } //end for each

  19:                 } //end for

  20:            //code removed for bevity

  21:      }

  22:     //end class

When I was developing this extension, I wanted to be able to specify a sing directory e.g instead of the root folder ' ~/photos ' I wanted to specify '~/photos/play' an have my code produce just that directory. What I found was that when Front-Page extensions are installed runtime directories are created on the web-server called _vti_cnf , amongst others. this meant that my function would return this directory instead of a value of 0. The above code removes these directories by setting their value as an empty string. Which can be later test for in the below.

   1: if (aryDirectories.Length == 1 && aryDirectories[0] == "")

   2: {

   3:  //deep folder with Frontpage extensions installed

   4: }

   5: else if(aryDirectories.Length ==0)

   6: {

   7: //deep folder with no Frontpage extensions installed

   8: }

   9: else

  10: {

  11:  //normal root folder

  12: }//end if

Class User_controls_Photo2

public partial class User_controls_Photo2 : System.Web.UI.UserControl

{

  

    #region Delecrations

    private PhotoData Photo;

    #endregion

  

    #region Properties

    private string PD = "~/Photos/play";

    public string PhotoDirectory

    {

        get

        { return PD; }

        set

        { PD = value; }

  

    }

  

    //Number of items per row

    private int numberperrow = 3;

    public int NumberPerRow

    {

        get

        { return numberperrow; }

        set

        { numberperrow = value; }

  

    }

  

    //Number of Cat items per row

    private int numbercatperrow = 3;

    public int NumberCatPerRow

    {

        get

        { return numbercatperrow; }

        set

        { numbercatperrow = value; }

  

    }

  

    //show catagoires?

    private bool SC = true;

    public bool ShowCategories

    {

        get

        { return SC; }

        set

        { SC = value; }

  

    }

  

    //CSSstyledefaults

    private bool CSSDef = true;

    public bool CSSDefaults

    {

        get

        { return CSSDef; }

        set

        { CSSDef = value; }

  

    }

  

  

    //Cell padding Cat

    private int CatCP = 0;

    public int CatCellPadding

    {

        get

        { return CatCP; }

        set

        { CatCP = value; }

  

    }

  

  

    //Cell Spacing Cat

    private int CatCS = 20;

    public int CatCellSpacing

    {

        get

        { return CatCS; }

        set

        { CatCS = value; }

  

    }

  

    //Cell padding Item

    private int ItemCP = 0;

    public int ItemCellPadding

    {

        get

        { return ItemCP; }

        set

        { ItemCP = value; }

  

  

    }

  

    //Cell Spacing Item

    private int ItemCS = 10;

    public int ItemCellSpacing

    {

        get

        { return ItemCS; }

        set

        { ItemCS = value; }

    }

  

    #endregion

  

    #region Controls

  

    //Creates the CatagoryControls

    public void CatagoryControl(PlaceHolder holdme)

    {

        int intItemsPerRow = numbercatperrow;

        int intNumbOfRows = 0;

        int numcatagories = Photo.count();

        //List<string> Catagorys = Photo.returnCatagoryImagesList();  

  

        //determine the dimensions

        if ((Photo.count() % intItemsPerRow) > 0)  // if there is a remainder do an integer division and add one to round up 

        {      //the rounding will round down so add extra row to compensate

            intNumbOfRows = (Photo.count() / intItemsPerRow) + 1; //rounds up

        }//end if  

        else

        {

            intNumbOfRows = (Photo.count() / intItemsPerRow); //no round as there is no remainder

        } //end else

  

        //create the table

        Table CatagoryTable = new Table();

        //table Properties Here

        if (CSSDef)

        {

  

  

        }

        else

        {

            CatagoryTable.CssClass = "PhotosTable";

        }//end if

  

        CatagoryTable.BorderWidth = 0;

        CatagoryTable.CellSpacing = CatCS;

        CatagoryTable.CellPadding = CatCP;

        CatagoryTable.HorizontalAlign = HorizontalAlign.Center;

        

  

        //create the rows and cells (column items)

  

        while (intNumbOfRows > 0)

        {

            //create the row

            TableRow RowTable = new TableRow();

  

            //css styles

            if (CSSDef)

            {

                //RowTable.Attributes.CssStyle.Add("border", "1px solid #563434");

                RowTable.Attributes.CssStyle.Add("text-align", "center");

            }

            else

            {

                RowTable.CssClass = "PhotosTableRow";

            }

  

            //create the Image and Lable objects

            //check for number of catagories

            int i = 1;

            while (numcatagories > 0 && i <= intItemsPerRow)

            {

                aphotoCatagory cat = Photo.getItem(numcatagories - 1);

  

                //create the cells

                TableCell CellTable = new TableCell();

  

                ImageButton CellImage = new ImageButton();

                Label CellLabel = new Label();

  

                CellImage.ImageUrl = @"~/User controls/CreateThumb.aspx?img=" + cat.getItem(0); //Catagorys[numcatagories - 1];

                CellImage.ID = "imgbutton" + numcatagories;

                //CellImage.Width = 200;

                CellImage.CommandName = (numcatagories - 1).ToString(); //Photo.ReturnKey(numcatagories - 1);

                CellImage.Command += new CommandEventHandler(CellImage_Command);

                CellImage.EnableViewState = false;

  

                CellLabel.Text = cat.Cname;  //Photo.returnCatagoryName(Photo.ReturnItem(numcatagories - 1));

                CellLabel.AssociatedControlID = "imgbutton" + numcatagories;

                CellLabel.EnableViewState = false;

  

                //css styles

                if (CSSDef)

                {

                    CellLabel.Attributes.CssStyle.Add("background-color", "#563434");

                    CellLabel.Attributes.CssStyle.Add("color", "white");

                    CellLabel.Attributes.CssStyle.Add("font-size", "3em");

                    CellLabel.Attributes.CssStyle.Add("display", "block");

                    CellLabel.Attributes.CssStyle.Add("font-family", "Verdana");

                    CellLabel.Attributes.CssStyle.Add("text-align", "center");

                    CellLabel.Attributes.CssStyle.Add("margin", "0px 0px 5px 0px");

                    CellLabel.Attributes.CssStyle.Add("padding", "5px 5px 5px 5px");

                    CellTable.Attributes.CssStyle.Add("padding", "5px 5px 5px 5px");

                    //CellTable.Attributes.CssStyle.Add("border", "1px solid #563434;");

                    

                }

                else

                {

                    CellLabel.CssClass = "photoCatagoryLabel";

                    CellImage.CssClass = "photoCatagoryLabel"; 

                }

  

                //add them to the current Cell

                CellTable.Controls.Add(CellLabel);

                CellTable.Controls.Add(CellImage);

  

                //add cells to current row

                RowTable.Controls.Add(CellTable);

  

                ++i; // increment i

                --numcatagories; //de-increment the table

  

            } //end while

  

            //add the row to the table 

            CatagoryTable.Controls.Add(RowTable);

  

            --intNumbOfRows;  //de-increment the rows

        } //end while

  

        //add the tabe to the placeholder

        holdme.Controls.Add(CatagoryTable);

  

    }

  

    // Event Handler for Imagebutton Controls

    void CellImage_Command(object sender, CommandEventArgs e)

    {

        //clear the current controls

        PlaceHolder1a.Controls.Clear();

  

        int key = int.Parse(e.CommandName); //get the dictionary key (folder name)

  

        //get the select catagory

        aphotoCatagory cat = Photo.getItem(key);

  

        //create a placeholder 

        PlaceHolder ab = new PlaceHolder();

  

        //create the control

        InnerCatagoryControl(ref cat, ab); //call the print method

        ab.ID = "onecatagoryview";

  

        //add control to the current view

        PlaceHolder1a.Controls.Add(ab);

  

    }

  

    //Prints the Items table

    public void InnerCatagoryControl(ref aphotoCatagory cat, PlaceHolder holdme)

    {

  

        int intItemsPerRow = numberperrow;

        int intNumbOfRows = 0;

        int numcatagories = cat.count();

  

        //Catagory Label

        System.Web.UI.WebControls.Label h1 = new Label();

        h1.Text = cat.Cname;

  

        //css styles

        if (CSSDef)

        {

  

            h1.Attributes.CssStyle.Add("font-Size", "3em");

            h1.Attributes.CssStyle.Add("display", "block");

            h1.Attributes.CssStyle.Add("color", "#5A5A43");

            h1.Attributes.CssStyle.Add("border-bottom", "1px solid black");

        }

        else

        {

            h1.CssClass = "ItemTableLabel";

  

        };

  

        //add the control to the collection

        holdme.Controls.Add(h1);

  

        //determine the dimensions

        if ((numcatagories % intItemsPerRow) > 0)  // if there is a remainder do an integer division and add one to round up 

        {      //the rounding will round down so add extra row to compensate

            intNumbOfRows = (numcatagories / intItemsPerRow) + 1; //rounds up

        }//end if  

        else

        {

            intNumbOfRows = (numcatagories / intItemsPerRow); //no round as there is no remainder

        } //end else

  

        //create the table

        Table CatagoryTable = new Table();

        //table Properties Here

        //CatagoryTable.CssClass = "aPhotosTable";

        CatagoryTable.BorderWidth = 0;

        CatagoryTable.CellSpacing = ItemCS;

        CatagoryTable.CellPadding = CatCP;

        CatagoryTable.HorizontalAlign = HorizontalAlign.Center;

  

        if (CSSDef)

        {

            CatagoryTable.Attributes.CssStyle.Add("margin-bottom", "20px");

             

        }

        else

        {

            CatagoryTable.CssClass = "ItemTable";

        }

  

        CatagoryTable.BorderColor = System.Drawing.Color.White;

  

        //create the rows and cells (column items)

  

        while (intNumbOfRows > 0)

        {

            //create the row

            TableRow RowTable = new TableRow();

  

            //create the Image and Lable objects

            //check for number of catagories

            int i = 0;

            while (numcatagories > 0 && i < intItemsPerRow)

            {

                //create the cells

                TableCell CellTable = new TableCell();

  

                Image CellImage = new Image();

                HyperLink hyp = new HyperLink();

  

                //link tag

                hyp.Attributes.Add("Rel", "lightbox");

                hyp.NavigateUrl = cat.getItem(numcatagories - 1);

  

                //cssstyles

                if (CSSDef)

                {

                    hyp.Attributes.CssStyle.Add("border", "1px solid #dcd7c8");

                    hyp.Attributes.CssStyle.Add("background-color", "#b4afa3");

                    hyp.Attributes.CssStyle.Add("padding", "0 2px");

                    hyp.Attributes.CssStyle.Add("display", "block");

                }

                else

                {

                    hyp.CssClass = "Itemhyp";

                }//end if

  

  

                //add <a> tage to table

                CellTable.Controls.Add(hyp);

  

                CellImage.ImageUrl = @"~/User controls/CreateThumb.aspx?img=" + cat.getItem(numcatagories - 1);

                CellImage.ID = "imgNext" + numcatagories;

                //CellImage.Width = 200;

                CellImage.EnableViewState = false;

  

                if (CSSDef)

                {

                    CellImage.Attributes.CssStyle.Add("padding", "5px");

                    CellImage.Attributes.CssStyle.Add("background-color", "white");

                }

                else

                {

                    CellImage.CssClass = "ItemCellImage";

                } //end if

  

  

                //add image to the hyperlink

                hyp.Controls.Add(CellImage);

  

                //add cells to current row

                RowTable.Controls.Add(CellTable);

  

                ++i; // increment i

                --numcatagories; //de-increment the table

  

            } //end while

  

            //add the row to the table 

            CatagoryTable.Controls.Add(RowTable);

  

            --intNumbOfRows;  //de-increment the rows

        } //end while

  

        //add the tabe to the placeholder

        holdme.Controls.Add(CatagoryTable);

  

  

        if (SC) //if showcatagoires is false dont print the return button

        {

            //generate return button

            Button newbtn = new Button();

            newbtn.ID = "btnreturn";

            newbtn.Text = "Return to Previous View";

            newbtn.Click += new EventHandler(newbtn_Click); //add event handler

            holdme.Controls.Add(newbtn);   //add control the bottom of heirarchy

  

            if (CSSDef)

            {

                newbtn.Attributes.CssStyle.Add("width", "100%");

                newbtn.Attributes.CssStyle.Add("display", "block");

            }

            else

            {

                newbtn.CssClass = "ItemNewbtn";

            }

        }//end if 

  

    }

  

    //return button Event Handler

    void newbtn_Click(object sender, EventArgs e)

    {

  

        //remove the image control and button control

        PlaceHolder1a.Controls.Clear();

  

        PlaceHolder placehold = new PlaceHolder();

        placehold.ID = "contentbox";

        PlaceHolder1a.Controls.Add(placehold);

        CatagoryControl(placehold);

  

    }//end of InnerCatagoryControl

  

    #endregion

  

    #region PageLoad(constructor)

    protected void Page_Load(object sender, EventArgs e)

    {

        Photo = new PhotoData(PhotoDirectory);

  

        PlaceHolder placehold = new PlaceHolder();

        placehold.ID = "contentbox";

        PlaceHolder1a.Controls.Add(placehold);

  

        if (SC == true) //if showcatagories is true

        {

  

            CatagoryControl(placehold);

        }

        else //print all the catagories

        {

            aphotoCatagory acat;

  

            for (int i = 0; i < Photo.count(); i++)

            {

                acat = Photo.getItem(i);

  

                InnerCatagoryControl(ref acat, placehold);

  

            }

        }

  

  

    }

    #endregion

  

  

}//end if userscontrol

These methods Create the tables that will host the images. So why not use a data-list or a Repeater control? Well the quick answer is I hate both controls. That and I Honestly did not think to use it till now. But hey that's what self examination is for, A data-List control would have reduced a lot of the complexity in this class. If I update the user control in the future I will make sure to use it, but I must say it is much easier to control the number of images per row using this procedural code.

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags:		photo control, asp.net, asp
Categories:		ASP.NET \| Projects
Actions:		E-mail \| Permalink \| Comments (424) \| Comment RSS

A custom User Control - Photos

Saturday, 12 January 2008 07:19 by Frimbob

Overview: I was looking for the ability to print out a page of photos without having to mannualy create a page, to this end I have created a custom user control that will search a set folder at run-time for images under sub-directories, with each catagory being its own catagory.

The challange included.

Methods to paraise the directories and a relation data-store
Developing a function that would print each catagory, and the Correct relative Paths.
Develop the HTML that would allow an assingable number of photos on each line.
CSS techniques to make them look good.

Part 1 -The Properties

[code:vb] <%@ Control Language="VB" ClassName="PhotoDisplay" %> <%@ Import Namespace="System.IO" %> <%@ Import Namespace="BlogEngine.Core" %> <%@ Import Namespace="System.Data" %> <script runat="server">   'Image Folder Property Private _imageFolderPath As String = "../pics/photos/" Private intItemsPerRow As Integer = 4   Public Property ItemsPerRow() As Integer Get Return intItemsPerRow End get Set(byVal value AS Integer) intItemsPerRow = value End Set End Property   Public Property ImageFolderPath() As String Get Return _imageFolderPath End Get Set(ByVal value As String) _imageFolderPath = value End Set End Property [/code]

Nothing too Special Here 2 public properties that can be set on the tag, the first being the root folder for the images and the second the number of photos on each row.

Part 2 - The Data Structures

[code:vb] Private Function FolderListArray(ByVal _imageFolderPath As String) As Object Dim photoCollection As New NameValueCollection Dim j As Integer Dim aryChildFolder() As String Dim strFileName As String Dim strFolderName As String Dim SplitAry1() As String Dim SplitAry2() AS String Dim i As Integer 'increment each directory Dim l As Integer   'store the directories here if (Directory.Exists(MapPath(_imageFolderPath)) ) Then Dim aryDirectories() As String = Directory.GetDirectories(MapPath(_imageFolderPath)) Dim length As Integer = aryDirectories.Length For i = 0 To length - 1 'create a ary for the childfolders file list aryChildFolder = Directory.GetFiles(aryDirectories(i), "*.jpg") 'assign the list For j = 0 To aryChildFolder.Length - 1 strFileName = Path.GetFileName(aryChildFolder(j)) strFolderName = Path.GetDirectoryName(aryChildFolder(j)) SplitAry1 = strFolderName.Split("\") SplitAry2 = _imageFolderPath.Split("/") strFolderName =" " For l = 0 To SplitAry2.Length - 1 Step 1 If (SplitAry2(l).Length > 0 And SplitAry2(l) <> "..") Then strFolderName = strFolderName & "/" & SplitAry2(l) 'equal to current End If Next l strFolderName = strFolderName & "/" & SplitAry1(SplitAry1.Length - 1)' the childDirectory strFolderName = strFolderName.Trim() strFolderName = strFolderName.Replace("~", "") 'only work if ~ char exists in string which sould only be at the start strFolderName = strFolderName.TrimStart("/") strFolderName = strFolderName.Trim() 'add the items to the collection photoCollection.Add(strFolderName, strFileName) Next jNext i   'Dim jjjj = HttpContext.Current.Request.ApplicationPath 'aryDirectories(i)   'return a the collection FolderListArray = photoCollection Else 'return an empty collection FolderListArray = photoCollection End If End Function [/code]

This function will return a NamedValueCollection , the basic structure has each subdirectory as the key with each graphics file assoicated to that key, since a directory requires a unique name all keys will be unique.

The MapPath function is used to resolve a full path from the application root the _imageFolderPath property is not enough for the Directory.Get methods.

The Directory.GetFiles(aryDirectories(i), "*.jpg") ensures that only JPEG files are save into the collection.

The above code can utilize parameters with the "~" or the relative ".." pass to it, the above code creates a key that drives from the root of the applicaiton to the parent directory . The images however must be organised into a subdirectory even if you just call it e.g "allphotos".

If there are no files found or issue with the paths, the named colleciton will be return as empty and an error will print.

Part 3 - The Html

[code:vb] Private Function CreateHTML(ByRef aryCollection As Object) As String 'create the stringbuilder Dim strHtmlString As New StringBuilder 'to build the HTML String Dim aryValues() As String 'Holds an array of Keys Dim i As Integer 'loop counter Dim intNumbOfRows As Integer 'loop counter Dim k As Integer 'loop counter   'Preview Image Html Start strHtmlString.Append("<div>") 'opening tag strHtmlString.Append("") strHtmlString.Append("<img id=""imgPreview"" alt=""PreviewImage"" style=""padding:5px; background:white;"" />") strHtmlString.Append("") strHtmlString.Append("</div>") 'close the opening tag strHtmlString.Append(" ") 'preview Image Stop   'Catagory Html Start For Each key As String In aryCollection.Keys 'loop through every subDirectory strHtmlString.Append("<div>") 'opening tag strHtmlString.Append("") strHtmlString.Append(key) ' Name of the Catagory strHtmlString.Append("") strHtmlString.Append(" (Click Image to Enlarge)") strHtmlString.Append("<hr />") 'line space strHtmlString.Append("<table cellspacing=""10"">") 'opend the table aryValues = aryCollection.GetValues(key) If (((aryValues.Length) Mod intItemsPerRow) > 0) Then ' if there is a remainder do an integer division and add one to round up 'the rounding will round down so add extra row to compensate intNumbOfRows = (aryValues.Length \ intItemsPerRow) + 1 'rounds up Else : intNumbOfRows = ((aryValues.Length) / intItemsPerRow) ' no round as there is no remainder End If While (i < aryValues.Length) 'loop through all files in the subdirectory For j As Integer = 1 To intNumbOfRows strHtmlString.Append("<tr>") While (k < intItemsPerRow And i < aryValues.Length) strHtmlString.Append("<td>") 'background: #b4afa3; strHtmlString.Append("") strHtmlString.Append("<img style=""padding:5px; background:white;"" src=""") strHtmlString.Append(key) strHtmlString.Append("/") strHtmlString.Append(aryValues(i)) strHtmlString.Append(""" width="" 100px "" onclick='imgPreview.src = this.src; window.scrollTo(0,80);'/>") strHtmlString.Append("") strHtmlString.Append("</td>") k = k + 1 'move onto next item i = i + 1 ' move onto next image in the subdirectory End While k = 0 'reset for next loop strHtmlString.Append("</tr>") Next j End While i = 0 'reset for next loop strHtmlString.Append("</table>") 'close the table strHtmlString.Append("</div>") 'close opening tag Next key 'Catagory Html Stop 'Return the HTML String CreateHTML = strHtmlString.ToString End Function [/code]

The above code builds a table for each catagory using the paramert 'intItemsPerRow', to determine the need number of table rows. inline evet hander is used to print each image to the previmage at the top of the page.

Part 4 - The PageLoad

[code:vb] Public Sub Page_Load() Dim aryCollection As NameValueCollection Dim strHtml As String   aryCollection = FolderListArray(_imageFolderPath) If(aryCollection.Count > 0) then strHtml = CreateHTML(aryCollection) Label1.Text = strHtml Else Label1.Text = "Error Directory does not exist or invaid path given " End if End Sub </script> <asp:Label ID="Label1" runat="server" EnableViewState="false" Text="Label"></asp:Label> [/code]

The Label1 is used to hold the HTML, if the namedvalue collection is = 0 then and error is printed.

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags:		user controls, photos
Categories:		ASP.NET
Actions:		E-mail \| Permalink \| Comments (191) \| Comment RSS

IComeFromTheNet.net

Photos Image Control Version 2

Other Requirements

Instructions

Supported Properties

CSS Classes

Code Critique

Class Layout

aphotoCatagory

Class PhotoData

Class User_controls_Photo2

A custom User Control - Photos

Part 1 -The Properties

Part 2 - The Data Structures

Part 3 - The Html

Part 4 - The PageLoad

Search

Pages

Categories

Tags

Archive

Blogroll

Disclaimer