|
Introduction
This article explains how to dynamically change static HTML Web galleries so that the Web galleries match the color, layout, and design of a Web site. This article will first discuss some tools that will create static HTML Web galleries, then it will describe reasons these static Web galleries will need to change. Finally a detailed description of how to actually implement these dynamic changes to static Web galleries will be presented.
download source code for this article.
See before and after.
Need for Dynamic Changes
As more people and companies have easy access to digital cameras, they will want to display the pictures they take on the Web. This situation presents two problems: first, how can you easily place these pictures on the Web, and second, once they are on the Web, how do you keep the pictures on the Web looking consistent with your site even when you redesign your site?
The answer to the first problem is to use a Web-development tool to create a Web gallery of static HTML Web pages for you automatically. There are several tools that will do this. Among them are Adobe Photoshop 5.5 and 6.0 and Macromedia Dreamweaver UltraDev 4, Arles Image Web Page Creator 4.5.X, FrontPage 2002, and more (For UltraDev, you need to download the Web Photo Album 2.0 Extension from the Macromedia Exchange for Dreamweaver UltraDev, see http://www.macromedia.com/exchange/ultradev.) For simplicity this article will refer to any programs that can automate the creation of Web galleries as Web gallery generators.
Now we come face to face with problem two - how to keep the Web galleries that are created looking consistent with your site? Your layout will change, colors will be updated or modified, and this will mean the Web gallery will need to be changed. The changes to the site can be limited so that they won't interfere with the Web gallery, but that limits what can be done on the site. To overcome this problem we will write a series of pages that can be used to dynamically change the look of your static Web gallery so that it fits with the rest of your design. Finally, dynamically changing the Web galleries can be used to overcome shortcomings of the Web gallery generators, or can be used to add extra pizazz to the Web gallery.
Analyze the Web Gallery
To begin, carefully analyze some of the Web galleries created by your favorite Web gallery generator. Create galleries using different options. Your dynamic Web gallery parsing code should be able to correctly parse your Web gallery regardless of which options you choose in the Web gallery generator. Once you have created several Web galleries, examine the resultant HTML output to identify the unique characteristics of each option and each page.
After a careful analysis of the options and outputs from one Web gallery generator, the following things became apparent:
First, there are two types of pages created. The first is an index page which displays all of the thumbnails. The second type of page is a "detail" page where the full-size image is displayed. In order to handle these two types of pages, two different parsing pages will need to be written.
The thumbnails on the index page point to different static detail pages. As the index page is displayed, we will need to pass information to the detail page so it will be able to determine which detail page it should display next.
All of the detail pages have the exact same HTML layout. The Next, Home, and Previous links point to different pages, depending on which image is next or previous to your current location. When the detail page is displayed, these links will need to change to use the correct index or detail parsing page.
Functions We Will Use
Looking over these changes, there are three functions that we will need to write. These functions will simplify the code and have the additional benefit of being easily reusable in other projects. The first function is a function that will load a static HTML file into an array in memory. Once the file is in memory, we will be able to change any line of the array at any time, which makes this a very flexible approach.
The other two functions are closely related to each other and help us manipulate the strings of text in the HTML page. As we parse the page, we will want to be able to retrieve the name of an image, the value of an HREF tag, a title, image source, etc. Since we are using static HTML pages we will know where various elements are on the page. One Web gallery generator might produce the following line of HTML code on line 12:
<TD><H2>Don't Hate Me 'Cuz I'm Cutieful</H2>John Sorensen<BR>5/18/01</TD>
Based on this line of output, we can see that the title on line 12 is indicated by an "<H2>" and an "</H2>". These tags are used to mark off, or delimit, the title for the page. If we know that all titles are delimited by these particular strings and this line is on line 12, we will always be able to extract the title. To help us do this we will write a function that accepts as parameters a line of HTML code, and the starting and ending delimiters. The function will return the string that is between these delimiters.
The third function is very similar to the second. Instead of retrieving text, this function will replace text that appears between two delimiters.
Load a File into an Array
The ReturnArrayOfFile function will take a file on your server and return it as an array in memory. The function accepts one parameter -- the physical path to the file to load into the array, e.g., "c:\inetpub\wwwroot\15seconds\webgallery\index.htm." The function uses the FileSystemObject to load the file into an array. The return value of the function is the array. Each line in the input file is equal to an array element, e.g., line 1 will be Array(1), line 2 will be Array(1), etc. If there is an error because an incorrect file path was passed in, the function will raise an error using the raise method of the err object.
Function ReturnArrayOfFile(strFilePath)
Dim arrFile()
Dim objFSOArray
Dim objFile
Dim objFileTextStream
'If you include the adovbs.inc with your page,
'you would not need to include these constants here
Const ForReading = 1
Const TristateUseDefault = -2
Set objFSOArray = CreateObject("Scripting.FileSystemObject")
'Make sure the file exists
If objFSOArray.FileExists(strFilePath) Then
Set objFile = objFSOArray.GetFile(strFilePath)
Set objFileTextStream = objFile.OpenAsTextStream(ForReading, TristateUseDefault)
'Redim the array to correctly initialize it
redim arrFile(0)
Do Until objFileTextStream.AtEndOfStream = True
ReDim Preserve arrFile(ubound(arrFile) + 1)
arrFile(ubound(arrFile)) = objFileTextStream.ReadLine
Loop
objFileTextStream.Close
Else
'Raise a custom error to show that a valid file path was not provided
Err.Raise vbObjectError + 1050
End If
ReturnArrayOfFile = arrFile
'Dereference all objects
Set objFSOArray = Nothing
Set objFile = Nothing
Set objFileTextStream = Nothing
End Function
There is one important feature about the array that is created. An array starts with element 0. In the code to populate this array, element 0 has been intentionally left empty so that line 1 of the array will be in arrFile(1) and line 2 will be in arrFile(2). This array will then be easier to use because the array element number will be equal to the line number of the static HTML file.
Return the String between Two Delimiters
This is the first of the two text-manipulation functions. This function accepts the full line of text, the starting delimiter, the ending delimiter, and a Boolean value to determine if the comparison should be performed using a textual comparison or a binary comparison. A binary comparison is case sensitive while a textual comparison is case insensitive. It is strongly recommended that string comparisons be done using textual comparison (case insensitive). If you manually edit an HTML Web gallery page and you don't type in the exact case that your code is looking for, you will get unexpected results. In addition, this function can be used in other applications, and including this extra switch will allow this function to be more versatile. In this article, we will always set this parameter equal to true to use textual comparison. The function expects the starting delimiter to be before the ending delimiter. If the delimiters are switched around, the function will raise an error.
Function AllBetweenDelimit(strInput, str1Delimit, str2Delimit, blnTextCompare)
Dim intStart1
Dim intStart2
Dim strTempOut
'Do some basic error checking
If str1Delimit = "" Or str2Delimit = "" Then
Err.Raise vbObjectError + 1060
Exit Function
End If
'Perform Textual Comparison(Case Insensitive) or Binary Comparison(Case Sensitive)?
if blnTextCompare then
intStart1 = InStr(1, strInput, str1Delimit,1)
intStart2 = InStr(1, strInput, str2Delimit,1)
else
intStart1 = InStr(1, strInput, str1Delimit,0)
intStart2 = InStr(1, strInput, str2Delimit,0)
end if
'Delimiters do not appear in strInput
If intStart1 = 0 Or intStart2 = 0 Then
Err.Raise vbObjectError + 1060
Exit Function
End If
'Delimiters are out of order
If intStart1 > intStart2 Then
Err.Raise vbObjectError + 1060
Exit Function
End If
strTempOut = Mid(strInput, intStart1 + Len(str1Delimit), (intStart2 - 1 - (intStart1 - 1 + Len(str1Delimit))))
AllBetweenDelimit = strTempOut
End Function
Replace the String between Two Delimiters
This function is very similar to the previous function and follows the same rules. This function accepts the additional parameter of the string you would like to insert between the delimiters.
Function ReplaceBetweenDelimit(strInput, str1Delimit, str2Delimit, strReplace, blnTextCompare)
Dim intStart1
Dim intStart2
Dim strTempStart
Dim strTempEnd
Dim strTempOut
If str1Delimit = "" Or str2Delimit = "" Then
Err.Raise vbObjectError + 1070
Exit Function
End If
'Perform Textual Comparison(Case Insensitive) or Binary Comparison(Case Sensitive)?
if blnTextCompare then
intStart1 = InStr(1, strInput, str1Delimit,1)
intStart2 = InStr(1, strInput, str2Delimit,1)
else
intStart1 = InStr(1, strInput, str1Delimit,0)
intStart2 = InStr(1, strInput, str2Delimit,0)
end if
'Delimiters do not appear in strInput
If intStart1 = 0 Or intStart2 = 0 Then
Err.Raise vbObjectError + 1070
Exit Function
End If
'Delimiters are out of order
If intStart1 > intStart2 Then
Err.Raise vbObjectError + 1070
Exit Function
End If
strTempStart = Left(strInput, (intStart1 - 1 + Len(str1Delimit)))
strTempEnd = Right(strInput, (Len(strInput) - (intStart2 - 1)))
strTempOut = strTempStart & strReplace & strTempEnd
ReplaceBetweenDelimit = strTempOut
End Function
Starting to Put It All Together
There are two ASP parsing pages that have been written to parse the two types of Web gallery pages. The ShowIndex.asp page will parse the index pages created by the Web gallery generator. The ShowDetailPage.asp will parse the detail pages created by the Web gallery generator. Both the ShowIndex.asp pages and the ShowDetailPage.asp will begin pretty much the same.
<%
Response.Buffer=True
on error resume next
%>
<!--#include file="i_gallery_functions.asp"-->
<!--#include file="i_gallery_const.asp"-->
<%
'Get values from the Querystring
strPageName = Request("pagename") 'This line is only in the ShowDetailPage.asp
strGalName = Request("galname")
'Make sure that parameters were passed in via the querysting (ShowDetailPage.asp)
if strPageName = "" or strGalName = "" then
Response.Write "In correct parameters were entered. Please try again."
Response.end
end if
strRoot = Server.MapPath(GALLERYROOTPATH)
strPath = strRoot & "\" & strGalName & "\" & strPageName
The response.buffer= true and the "on error resume next" has been activated. Two files have been included as well. The i_gallery_functions.asp is the file that holds the three functions that we created previously. The i_gallery_const.asp file has several values that are the same for both pages. Since we want both files to use these same values and to make maintenance easier, we will put these constants in one place.
The contents of the i_gallery_const.asp file are as follows:
<%
'Dynamically get the path for this page
dim strSPName
dim intLastSlash
dim strSName
strSPName = Request.ServerVariables("Script_Name")
intLastSlash = instrrev(strSPName,"/",len(strSPName))
strSName = right(strSPName,(len(strSPName)-intLastSlash))
'When this is on your site, do not dynamically retrieve
'the path for the page. Manually type it in.
'CONST GALLERYROOTPATH = "/15Seconds/"
'If you use GALLERYROOTPATH as a const, then comment out the line below
dim GALLERYROOTPATH
GALLERYROOTPATH = left(strSPName,intLastSlash)
CONST STRSTYLESHEET = "<link rel=stylesheet style=""text/css"" href=""common.css"">"
%>
You will need to use the physical path to the Web gallery to correctly process the gallery. This path can be determined dynamically as shown here, or it can be set up using a constant. Typically you will want to use a constant because you will know where your gallery is located and the location won't change. Another reason to use a constant for the location of the gallery is so that you can keep your Web gallery data in a different directory than your processing script. The script location for this example is dynamically determined here so that it will be easier to set up this example on your local machine.
In this file I have also defined the style sheet as follows:
CONST STRSTYLESHEET = "<link rel=stylesheet style=""text/css"" href=""common.css"">"
Both the index page and the detail page will have the same code at the bottom of each page.
for x=0 to ubound(arrFile)
Response.Write arrFile(x) & vbcrlf
next
if err.number <> 0 then
Response.Clear
Response.Write "There has been an unexpected error.<BR>"
Response.end
end if
%>
The For...Next loop will write out the values of the array to the page. There is also a check to see if there are any errors. If there are, then the buffer is cleared, an error message is display, and the processing is stopped.
The Index Page
This is the complete HTML of the index page:
1 <HTML>
2 <HEAD>
3 <TITLE>Don't Hate Me 'Cuz I'm Cutieful</TITLE>
4 <META name="generator" content="Adobe Photoshop(R) 5.5 Web Photo Gallery">
5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
6 </HEAD>
7
8 <BODY bgcolor="#ffffff" link="#ff0000" vlink="#52188C">
9
10 <TABLE border="0" cellpadding="5" cellspacing="2" width="100%" bgcolor="#f0f0f0">
11 <TR>
12 <TD><H2>Don't Hate Me 'Cuz I'm Cutieful</H2>John Sorensen<BR>5/18/01</TD>
13 </TR>
14 </TABLE>
15 <CENTER><TABLE cellspacing=10 cellpadding=0 border=0>
16 <TR>
17 <!-- Thumbnails with hyperlinks -->
18 <TD align="center"> <A href="pages/108-0803_IMG.htm"><IMG src="thumbnails/108-0803_IMG.jpg" border="0" alt="108-0803_IMG"></A> </TD>
19 <TD align="center"> <A href="pages/108-0804_IMG.htm"><IMG src="thumbnails/108-0804_IMG.jpg" border="0" alt="108-0804_IMG"></A> </TD>
20 <TD align="center"> <A href="pages/108-0805_IMG.htm"><IMG src="thumbnails/108-0805_IMG.jpg" border="0" alt="108-0805_IMG"></A> </TD>
21 </TR>
22 </TABLE></CENTER>
23
24 </BODY>
25
26 </HTML>
Carefully review this HTML page. We will make the following changes to the HTML page.
On Line 3, we will add in a style sheet. The style sheet makes the gallery look consistent with the rest of the Web application/site.
On Line 10, we will remove the bgColor of the table that is added by default. We will use the other default settings. For the first delimiter use "bgcolor=""". The two sets of double quotes when processed by the server will evaluate to a single set of double quotes. The second delimiter is """>" or "">" if written out. If only a single double quote were used, then the function would have returned an error because a single quote is not a unique delimiter so we use the single double quote and the greater-than sign. Remember, in order for the functions we wrote earlier to work, we must pass in unique delimiters.
Line 12, remove the name of the Photographer (this is an option provided by the Web gallery generator) and change the display line to the following: "<TD><H2><center>Don't Hate Me 'Cuz I'm Cutieful - 5/18/01</center></TD>".
I carefully tested the section of code several times, using the option to include the photographer's name or not to include the photographer's name. In both cases the line break tag "<BR>" is included so this code will always work. Remember to check your code for all possible options.
On line 18 we must begin to change the link so that it doesn't point directly to the HTML page.I Instead we must point the link to the ShowDetailPage.asp page and pass in two parameters using the querysting. The first parameter will be galname and will equal the name of the gallery. The second parameter is pagename and is equal to the name of the page.
The completed parsing page, ShowIndex.asp, is as follows.
<%
Response.Buffer = True
'on error resume next
%>
<!--#include file="i_gallery_functions.asp"-->
<!--#include file="i_gallery_const.asp"-->
<%
Dim strGalName
Dim strRoot
Dim strPath
Dim arrFile
Dim strPageName
Dim strDate
Dim strNewGalName
Dim x
Dim strLink
Dim strImage
strGalName = Request.QueryString("galname")
If strGalName = "" Then
'Use the default example page
strGalName = "sethkong"
End If
strRoot = Server.MapPath(GALLERYROOTPATH)
strPath = strRoot & "\" & strGalName & "\index.htm"
'Turn this file into an array in memory
arrFile = ReturnArrayOfFile(strPath)
'Add in the stylesheet
arrFile(3) = arrFile(3) & STRSTYLESHEET
'Change the Color of the Background Table
arrFile(10) = ReplaceBetweenDelimit(arrFile(10), "bgcolor=""", """>", "", True)
'Reformat the name of the index page
'Get the name of the gallery
strPageName = AllBetweenDelimit(arrFile(12), "<H2>", "</H2>", True)
'Get the date
strDate = AllBetweenDelimit(arrFile(12), "<br>", "</td>", True)
'Change the gallery to the newly formatted name
strNewGalName = "<center>" & strPageName & " - " & strDate & "</center>"
'Insert all of the changes into the string
arrFile(12) = ReplaceBetweenDelimit(arrFile(12), "<h2>", "</td>", strNewGalName, True)
'Change the links of all thumbnails
For x = 13 To UBound(arrFile)
If InStr(1, UCase(arrFile(x)), "HREF=") Then
'Change the link to point to the ShowDetailPage.asp and add in the querystring
strLink = AllBetweenDelimit(arrFile(x), "HREF=""", """><", True)
strLink = "ShowDetailPage.asp?galname=" & strGalName & "&pagename=" & strLink
arrFile(x) = ReplaceBetweenDelimit(arrFile(x), "HREF=""", """><", strLink, True)
'Change the source of the image
strImage = AllBetweenDelimit(arrFile(x), "src=""", """ b", True)
arrFile(x) = ReplaceBetweenDelimit(arrFile(x), "src=""", """ b", GALLERYROOTPATH & _
strGalName & "/" & strImage, True)
End If
Next
For x = 0 To UBound(arrFile)
'adding in the "& vbcrlf " is not required but the HTML is easier to read
Response.Write arrFile(x) & vbCrLf
Next
If Err.Number <> 0 Then
Response.Clear
Response.Write "There has been an unexpected error.<BR>"
Response.end
End If
%>
Most of these changes are implemented in a straightforward manner. I will examine in detail the For...Next loop which starts processing on line 18 of the HTML File. This gallery has an unknown number of thumbnails on it so a looping structure must be used.. The condition I test for is to see if the string "HREF=" exists in the line. If it does, then I know that there is a link on that line and there is a thumbnail on that line. Two pieces of information must be changed. The first is the link, and the second is the source of the image tag.
The first step in changing the link is to get the current link value, which is a relative link to the HTML page that contains the large image. Use the AllBetweenDelimit function using "HREF=" and "><" as delimiters to get the link. Now that we have the link, create the new link to point to the ShowDetailPage.asp page and pass in the following values:
galname = the name of the current gallery
pagename = the name of the page included with the thumbnail.
The second step is to change the src of the image. Use "src="" and "" b" as delimiters to get the name of the image. We will substitute in an absolute reference to the page as follows:
GALLERYROOTPATH & strGalName & "/" & strImage
Now all thumbnails on the page have had their source and link changed. All changes to the array in memory have been changed successfully, and we can display the page to the browser using this code (this is the same code on each page).
The Detail Page
The complete HTML of a typical detail page is shown below:
1 <HTML>
2 <HEAD>
3 <TITLE>108-0804_IMG</TITLE>
4 <META name="generator" content="Adobe Photoshop(R) 5.5 Web Photo Gallery">
5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
6 </HEAD>
7
8 <BODY bgcolor="#ffffff" link="#ff0000" vlink="#52188C">
9
10 <TABLE border="0" cellpadding="5" cellspacing="2" width="100%" bgcolor="#f0f0f0">
11 <TR>
12 <TD><H2>Don't Hate Me 'Cuz I'm Cutieful / 108-0804_IMG</H2>John Sorensen<BR>5/18/01</TD>
13 </TR>
14 </TABLE>
15
16 <P><CENTER>
17 <TABLE border="0" cellpadding="0" cellspacing="2" width="200">
18 <TR>
19 <TD width="80" align="center"><A href="108-0803_IMG.htm"><IMG
src="../images/previous.gif" height="30" width="30" border="0" alt="Previous"></A></TD>
20 <TD width="80" align="center"><A href="../index.htm"><IMG
src="../images/home.gif" height="30" width="30" border="0" alt="Home"></A></TD>
21 <TD width="80" align="center"><A href="108-0805_IMG.htm"><IMG
src="../images/next.gif" height="30" width="30"
border="0" alt="Next"></A></TD>
22 </TR>
23 </TABLE>
24 </CENTER></P>
25
26 <P><CENTER><IMG src="../images/108-0804_IMG.jpg" border="0"
alt="108-0804_IMG"></CENTER></P>
27 </BODY>
28
29 </HTML>
The following are the changes we will make to the HTML:
The HTML for the detail page is very similar to the index page. The title is on line 3, and we will add in the style sheet to this line, using the same code as on the index page. We also change the background color of the table using the same code as on the index page.
On line 12 we will change the title displayed on the page to remove the name of the image from the title. We will also remove the name of the photographer.
There is one important difference between the title of the index page and the detail page. On the index page the title of the page is the name of the gallery. On the detail page, however, the title is the name of the image. To be consistent, we will put the name of the gallery as the title for the detail pages. The name of the gallery is in line 12 already so all we need to do is to retrieve the name of the gallery from line 12, and put it in line 3. Fortunately, we already populated the variable strPageName with the name of the gallery, so we use the code below to make the name of the gallery the title of the page.
arrfile(3) = ReplaceBetweenDelimit(arrfile(3), "<title>", "</title>", strPageName, True)
Beginning on line 19, the Web gallery generator has already included links for us to display the next, previous and index pages. Carefully test the Web gallery generator you use, but in this Web gallery generator there were four different possibilities of links that could occur.
- Just a link to the homepage if there is only one picture in the gallery
- A link to the homepage and the next image - if this is the first picture in the gallery
- A link to the previous picture, homepage, and next picture - if the image is in the "middle" of a gallery
- A link to the previous picture and the homepage - if this is the last picture in the gallery.
The code that we write will need to handle all of these possibilities.
The full-size image on the screen will also need to have its source changed from a relative reference to an absolute reference. An important difference between the images used for navigation and the full-size images is that the navigation images are GIFs and the full-size images are JPEGs. We will use this difference to distinguish between the two.
The complete parsing page, ShowDetailPage.asp, is shown below:
<%
Response.Buffer = True
'on error resume next
%>
<!--#include file="i_gallery_functions.asp"-->
<!--#include file="i_gallery_const.asp"-->
<%
Dim strGalName
Dim strRoot
Dim strPath
Dim arrFile
Dim strPageName
Dim strDate
Dim strNewGalName
Dim x
Dim strLinkPageName
'Get values from the Querystring
strPageName = Request("pagename")
strGalName = Request("galname")
'Make sure a correct value was passed into the page
If strPageName = "" Or strGalName = "" Then
Response.Write "In correct parameters were entered. Please try again."
Response.end
End If
strRoot = Server.MapPath(GALLERYROOTPATH)
strPath = strRoot & "\" & strGalName & "\" & strPageName
'Make sure the only backslashes are used for the Path
strPath = Replace(strPath, "/", "\")
'Turn this file into an array in memory
arrFile = ReturnArrayOfFile(strPath)
'Add in the stylesheet - Same as on IndexPage
arrFile(3) = arrFile(3) & STRSTYLESHEET
'Change the Color of the Background Table - Same as on IndexPage
arrFile(10) = ReplaceBetweenDelimit(arrFile(10), "bgcolor=""", """>", "", True)
'Reformat the name of the index page - Very similar to the IndexPage
'Get the name of the gallery - Slight Change in the delimiter used
strPageName = AllBetweenDelimit(arrFile(12), "<H2>", " / ", True)
'Get the date
strDate = AllBetweenDelimit(arrFile(12), "<br>", "</td>", True)
'Change the Gallery to the newly formatted name
strNewGalName = "<center>" & strPageName & " - " & strDate & "</center>"
'Insert all of the changes into the string
arrFile(12) = ReplaceBetweenDelimit(arrFile(12), "<h2>", "</td>", strNewGalName, True)
'Change the title of this page using the strPageName we just retrieved from line 12
arrFile(3) = ReplaceBetweenDelimit(arrFile(3), "<title>", "</title>", strPageName, True)
For x = 19 To UBound(arrFile)
If (InStr(1, UCase(arrFile(x)), ".GIF") > 0) Then
'Change the links that point to the index page
If InStr(1, UCase(arrFile(x)), "INDEX") > 0 Then
'Change the Href Link
arrFile(x) = ReplaceBetweenDelimit(arrFile(x), "<A Href=""", """><IMG", "ShowIndex.asp?galname=" & strGalName, True)
'Change the Image Source for the image
arrFile(x) = ReplaceBetweenDelimit(arrFile(x), "src=""", "/images", GALLERYROOTPATH & strGalName, True)
'Change the links that point to the next or previous links
Else
'Get the page name
strLinkPageName = AllBetweenDelimit(arrFile(x), "<A Href=""", """><IMG", True)
'Change the Href Link
arrFile(x) = ReplaceBetweenDelimit(arrFile(x), "<A Href=""", """><IMG", "ShowDetailPage.asp?galname=" & strGalName & _
"&pagename=pages/" & strLinkPageName, True)
'Change the Image Source
arrFile(x) = ReplaceBetweenDelimit(arrFile(x), "src=""", "/images", GALLERYROOTPATH & strGalName, True)
End If
Else
'Change the image source for the gallery picture
If (InStr(1, UCase(arrFile(x)), ".JPG") > 0) Then
'Change the Image Source for the image
arrFile(x) = ReplaceBetweenDelimit(arrFile(x), "src=""", "/images", "./" & strGalName & "/", True)
End If
End If
Next
For x = 0 To UBound(arrFile)
Response.Write arrFile(x) & vbCrLf
Next
If Err.Number <> 0 Then
Response.Clear
Response.Write "There has been an unexpected error.<BR>"
Response.end
End If
Response.Write "<BR><BR><center><a href=""default.asp"">Choose A Different Web Gallery</a></center>"
%>
At the beginning of the page, the following line appears:
strpath = replace(strPath,"/","\")
This line will replace all forward slashes to backward slashes so that the path is found correctly.
More Advanced Web Gallery Parsing Techniques
I have used variations of the code presented here with different Web gallery generators in both professional and personal settings.. I have come across several areas that can be a little tricky. In order to keep my presentation simple I have not discussed these areas. In this last section I will go over some techniques to help work through these tricky areas.
Always make your comparisons using textual comparison (case insensitive) or using uppercased letters. I have seen several HTML editors that will make all HTML tags in all uppercase or all lowercase, or different Web designers will use different cases when they code. If you are looking for "HTML" and it is written to the page as "html", your page will not display correctly. In theory code that is generated by a web gallery generator will not need to be changed, but time and time again I have seen misspellings that need to be corrected and some of the HTML code inadvertently gets changed.
Some HTML editors will actually add in extra lines when you use their editor. Since we were looking for exact line numbers, i.e., line 3, an extra line at the beginning of the HTML page will make line 3 be line 4, and you won't be able to display the Web gallery correctly. Your client won't want to hear that their Web editor tool "broke" the page, so this is how you solve the problem. Let's say that you need to change the title. In the example presented here, we changed line 3. If I were making this page for a client, I would use something similar to the following:
for x = 1 to 5
if instr(1,Ucase(arrFile(x)),"<TITLE>") then
arrFile(3) = arrFile(3) & STRSTYLESHEET
end if
next
If an extra line or two were added to the page by accident or by an errant HTML editor, then your code will still work. True there is a small amount of additional processing involved, but it is far cheaper to add in minor amounts of extra processing into your application than it is to deal with an upset client.
As you work on the page, you might want to be able to see which lines in the array have which values. Use this code snippet below to see the array contents.
for x=0 to ubound(arrFile)
Response.Write x & " " & server.HTMLEncode(arrFile(x)) & "<BR>"
next
Always test under all possible options that your Web gallery generator can produce. When a different person creates a Web gallery and chooses different options than you would normally choose, your code will still work correctly.
An easy way to give your existing Web gallery an overnight new look is to add in some DHTML effects, or JavaScript rollovers to the page.
Summary
In this article we have discussed some popular Web gallery generators and why you would want to use them. Then we created three functions to assist us in parsing out the static HTML created by a Web gallery generator. Next we looked at a detailed example of how to parse out the two types of pages most commonly created by a Web gallery generator -- the index page and the detail page. Finally some additional considerations for making your routines more likely to work under all circumstances were presented. Good luck with the Web galleries that you make and display on the Internet.
About the Author
John Sorensen is a Microsoft Certified Solution Developer (MCSD) with extensive experience in distributed applications and Web development. He is currently working for a Fortune 500 company in Houston, Texas. He has been designing and developing Web, desktop, and distributed MS solutions since 1997. His core skills are Visual Basic, SQL Server, Microsoft Transaction Server, Site Server, and InterDev. His hobbies include reading and spending time with his wife, Caroline, and his seven-month-old son, Seth. He may be reached at john@johnandcarolinesorensen.com.
|
