This example will show you how to use URL variables and make use of ColdFusion templates. The idea is to have an image gallery with two Pages. One standard HTML page and one ColdFusion template. The normal HTML document will be the page with all of your thumbnails on it. When a specially formatted link beneath the image is clicked on, the browser will go to the ColdFusion template and display the larger, full-size image in the page. Before you would have to have used one page for the thumbnail and another for each larger image. Now all you need to use is two pages, one with the thumbnails and one for the full size image. What you do is tell the ColdFusion template what image you want to insert into the page. The following code shows you how to do this.
In this application we use two variables. Url.title and Url.myimage. The title variable is the text to go inside the title tags, the
myimage variable is the name of the image file to be shown.
On
the Thumbnails page URL's to the ColdFusion template will have to be created
using the following format. For image 1 a link totemplate.cfm?title=mytitle&myimage= image1.jpg, for image 2 a link to
the same page would look like template.cfm?title=mytitle2&myimage=image2.jpg or
whatever the filename of the second image would be. Now lets look at the code
that will deal with these URL's.
PLEASE NOTE: The HTTP 1.1 specification limits the number of characters that can be passed down along it to 1000 characters. This includes the web site URL. Therefore large amounts of text can't be sent down the URL.
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD
">
2.
3. <html>
4. <head>
5. <cfif isDefined("url.title">
6. <cfoutput><title>#url.title#</title></cfoutput>
7. <cfelse>
8. <cflocation url="thumbnails.html">
9. </cfif>
10. </head>
11.
12. <body>
13. <cfif
isDefined("url.myimage")>
14. <cfoutput><div
align="center"><img
src="#url.myimage#"></div></cfoutput>
15. <cfelse>
16. <cflocation url="thumbnails.html">
17. </cfif>
18.
19. </body>
20. </html>
Explanations of the ColdFusion Code follows.
Lines 5-9:
This CF code deals
with the title attribute of the page. Using <CFIF> and the isDefined
function we check to see if the title variable has been passed into our
ColdFusion page. If not, then we send the person back to the thumbnails.html.
Otherwise, if it has been defined we place the title specified in the URL in
between the <title> tags so when it returns to the browser the title is
specific to the image.
Lines 13-17:
This is the part of the page that deals with displaying our image.
In the URL link to that page we will pass
the location and name of the image file. E.g. template.cfm?myimage=image1.jpg.
Then when the page gets back to the user image1.jpg will be inside the IMG SRC
tag and so the browser will retrieve image1.jpg. If the second link is clicked
on then the information appended to the URL will be used, so if the link
followed was template.cfm?myimage=image2.jpg then the text image2.jpg would be
inserted into the place where #url.myimage# is used in the template. Hence the template.cfm will load whatever image it's told to load by the URL. If this
attribute isn't there then the isDefiend function will return false and
therefore go to thumbnails.html.
In this article we have looked at variables in a very basic level and attempted to describe what they do and how they can be used. There are many sources of variables and ways that they can be manipulated. As you read thorough each article you will see them in use more and more. Variables are very powerful and you will use them extensively in your ColdFusion applications.