Posted in ColdFusion | Posted on 08-29-2007 | 6,867 views
I wrote up a quick and dirty slide show application in ColdFusion 8 and thought I'd share the code. While it isn't very pretty (I have a second version to show you tomorrow), it gets the job done. First take a look at the demo, and then I'll describe the code:
The demo makes use of two ColdFusion 8 features - image support and and the cflayout tag. Let me talk first about how the images are handled. I begin by getting a list of all the files in a folder:
2<cfdirectory action="list" directory="#folder#" name="images" type="file">
Note the new type attribute. This lets you filter a directory listing to just files or directories. Next I run a query of query to filter out just the images. Why not use the filter attribute? The cfdirectory tag only lets you filter by one extension. I wanted to support both GIFs and JPGs so I used the following:
2<cfquery name="images" dbtype="query">
3select name
4from images
5where lowerr(name) like '%.jpg'
6or lower(name) like '%.gif')
7and lower(name) not like '_thumb_%'
8</cfquery>
Notice the last condition. I'm also going to filter out any file named _thumb_*. Why? I'm getting there.
Next I create a simple layout using the cflayoutarea tag, type=border. I'm not going to bother showing that code here, you can see it at the end. In my left hand menu I want to show all my pictures, but I want to show thumbnails and not a scaled down version of the full image. How do I do that?
2 <cfif not fileExists(folder & "_thumb_" & name)>
3 <cfimage source="#folder##name#" action="read" name="newimage">
4 <cfset imageScaleToFit(newimage, 100, 100)>
5 <cfimage action="write" source="#newimage#" destination="#folder#/_thumb_#name#" overwrite="true">
6 </cfif>
7
8 <cfoutput><a href="javaScript:setImage('#jsStringFormat(name)#');"><img src="#folderurl#/_thumb_#name#" border="0" vspace="5" /></a></cfoutput>
9</cfloop>
I begin by looping over my images query. For each one, I check for the existence of a thumbnail version. If it doesn't exist, I read in the file using cfimage. I then use the scaleToFit function. This will resize and keep the proportions of my thumbnail. Lastly I write out the scaled down image. That last bit of JavaScript just sets the image for my main display.
Pretty simple, eh? As I said, I got a slightly sexier version to show tomorrow. Here is the complete code for the demo. Note that I abstracted out the URL and folder for images. In theory you could turn this into a simple custom tag.
2
3<!--- what url is the folder, relative from me --->
4<cfset folderurl = "images2">
5<!--- full path to folder --->
6<cfset folder = expandPath("./images2/")>
7
8<!--- get my images --->
9<cfdirectory action="list" directory="#folder#" name="images" type="file">
10
11<!--- filter out jpg and gif and _thumb_* --->
12<cfquery name="images" dbtype="query">
13select name
14from images
15where lowerr(name) like '%.jpg'
16or lower(name) like '%.gif')
17and lower(name) not like '_thumb_%'
18</cfquery>
19
20
21<cflayout type="border">
22
23<cflayoutarea position="left" title="Pictures" size="150" align="center" collapsible="true">
24
25<script>
26function setImage(i) {
27 var mImage = document.getElementById('mainImage');
28 <cfoutput>
29 mImage.src='#folderurl#/'+i;
30 </cfoutput>
31}
32</script>
33
34<cfloop query="images">
35 <cfif not fileExists(folder & "_thumb_" & name)>
36 <cfimage source="#folder##name#" action="read" name="newimage">
37 <cfset imageScaleToFit(newimage, 100, 100)>
38 <cfimage action="write" source="#newimage#" destination="#folder#/_thumb_#name#" overwrite="true">
39 </cfif>
40
41 <cfoutput><a href="javaScript:setImage('#jsStringFormat(name)#');"><img src="#folderurl#/_thumb_#name#" border="0" vspace="5" /></a></cfoutput>
42</cfloop>
43
44</cflayoutarea>
45
46<cflayoutarea position="center" align="center">
47
48<cfoutput>
49<p>
50<img src="#folderurl#/#images.name[1]#" id="mainImage">
51</p>
52</cfoutput>
53
54</cflayoutarea>
55
56</cflayout>
My algebra went like this:
<cfset resizedHeight = round((resizedWidth * objImage.Height) / objImage.Width) />
imageScaleToFit will be a lot easier. I knew there had to be a function for this.
Anyone have any ideas why a separate CF function had to be created to accomplish this?
I do not propose to speak for Adobe, but this is my take.
The cfimage tag was built to do "common" functions. Not everything. So adobe made choices on what would make sense in there.
Outside of that - everything (*) cfimage can do can be done in image functions.
When I say everything, I mean everything but writeToBrowswer, and while CAPTCHA can be done with functions, it is a heck of a lot easier with cfimage.
I think this is why your web site is so great - you provide lots of examples - please keep the CF8 examples coming.
I would love to see what Coldfusion can do with an image uploading interface.
I am waiting for your and Ben's new book to come out.
Yes, I would love to see a simple image upload demo in CF8!
I created my own image uploader for my rental site in CF7 using Doug Hugh's CFC but I would love to see what the new image tag can do.
I can't seem to locate it. If it is in your new book, i will see it there.
Thanks,
Dave
http://www.coldfusionjedi.com/index.cfm/2007/8/9/R...
[Add Comment] [Subscribe to Comments]