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.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.
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
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
5. <cfif isDefined("url.title">
8. <cflocation url="thumbnails.html">
13. <cfif isDefined("url.myimage")>
14. <cfoutput><div align="center"><img src="#url.myimage#"></div></cfoutput>
16. <cflocation url="thumbnails.html">
Explanations of the ColdFusion Code follows.
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
Otherwise, if it has been defined we place the title specified in the URL in
<title> tags so when it returns to the browser the title is
specific to the image.
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.
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
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
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.