| Will Diablo III ever get published. >>

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 (0) \| Comment RSS

Photos Image Control Version 2 Earlier I created a custom User control , to fill a gab in the blog framework I am currently using...Creating Custom Word Menus with Word 2003As part of my office project I have found the need to create a custom menu, it sound easy but it rea...Photos[usercontrol: ~/User controls/Photo2.ascx; PhotoDirectory=~/photos/; ShowCategories=true; NumberPerR...

Add comment

Name*
E-mail* (Will show your Gravatar icon)
Website
Country Country flag

b i u quote

Comment
Preview

Notify me when new comments are added

IComeFromTheNet.net

A custom User Control - Photos

Part 1 -The Properties

Part 2 - The Data Structures

Part 3 - The Html

Part 4 - The PageLoad

Related posts

Add comment

Search

Pages

Categories

Tags

Archive

Blogroll

Disclaimer