Show a random image with <cfdirectory>
This is a chunk of code I've had around for a while... fairly useful, felt like sharing.
Basically you're looking in a given folder with <cfdirectory> and pulling out a random image by counting between 1 and the number of images found. Just enter the relative location of your images folder and you're all set.
<!--- set the relative path to the folder with your images --->
<cfset imagesFolder = "./">
<!--- code to look in directory, choose one image at random --->
<cfdirectory directory="#expandPath(imagesFolder)#" filter="*.jpg" name="getPics" action="list"/>
<cfset maxrows = getPics.recordCount/>
<cfset startRow = randRange(1, maxrows)/>
<!--- if one or more photos was found --->
<cfif maxrows gt 0>
<div class="showPic">
<cfoutput query="getPics" startrow="#startRow#" maxrows="1">
<img src="#imagesFolder#/#name#" alt="#listFirst(name, ".")#"/>
</cfoutput>
<br /><br />
Hit refresh or reload to get a different image.
</div>
</cfif>
NOTE: you might want to give the image a different alt tag, like the name of your site, or... whatever. (this code will use the filename of the image). This same code can be adapted for any files in any directory - change the 'filter' attribute to allow whatever file extension you like.
With CF8, you could get also the height and width of the image to create proper height/width attributes for the <img> tag.
[Update 1/22/08] This mini-tutorial is now featured on learncf.com
can someone suggest how i could get this to output 3 random images instead of just one? i need a series of three thumbnails to appear, and when i run a loop on this, 3 of the same images are showing up. any help would be greatly appreciated
try it like this
<cfdirectory directory="#expandPath(imagesFolder)#" filter="*.jpg" name="getPics" action="list" recurse="true"/>
The 'recurse' attribute means 'include subfolders'
<cfoutput query="getPics" startrow="#startRow#" maxrows="3">
<img src="#imagesFolder#/#name#" alt="#listFirst(name, ".")#"/>
</cfoutput>
Change maxrows to "3"
Bear in mind we are getting just the *start* row at random, so the others will be in order from the first one.
i.e. you might get 7-8-9, 3-4-5 or 2-3-4, etc
...but i'm still getting repeats...could you take a look at the code/logic and see if you see an easier way to load 6 uniquely random images?
thanks!
j
<cfdirectory directory="#expandPath(thumbimagesFolder)#" filter="*.jpg" name="getThumbs" action="list" recurse="yes"/>
<cfset maxTrows = getThumbs.recordCount/>
<cfset startTRow = randRange(1, maxTrows)/>
<cfset startTRow2 = randRange(1, maxTrows)/>
<cfset startTRow3 = randRange(1, maxTrows)/>
<cfset startTRow4 = randRange(1, maxTrows)/>
<cfset startTRow5 = randRange(1, maxTrows)/>
<cfset startTRow6 = randRange(1, maxTrows)/>
<cfif startTRow2 EQ (startTRow OR startTRow3 OR startTRow4 OR startTRow5 OR startTRow6)>
<cfset startTRow2 = randRange(1, maxTrows)/>
<cfelseif startTRow3 EQ (startTRow OR startTRow2 OR startTRow4 OR startTRow5 OR startTRow6)>
<cfset startTRow3 = randRange(1, maxTrows)/>
<cfelseif startTRow4 EQ (startTRow OR startTRow3 OR startTRow2 OR startTRow5 OR startTRow6)>
<cfset startTRow4 = randRange(1, maxTrows)/>
<cfelseif startTRow5 EQ (startTRow OR startTRow3 OR startTRow4 OR startTRow2 OR startTRow6)>
<cfset startTRow5 = randRange(1, maxTrows)/>
<cfelseif startTRow6 EQ (startTRow OR startTRow3 OR startTRow4 OR startTRow5 OR startTRow2)>
<cfset startTRow6 = randRange(1, maxTrows)/>
</cfif>
I am actually loading 6 images into two rows of 3 on the page. I would really prefer for them all to be uniquely random, but could probably live with sequential if need be. However, say there are 9 images in the folder that is being read, and #startRow# = 6, and maxrows="6". what happens when the image count gets to 10, or does it automatically know to loop back to the beginning of the images?
Thanks again for all your help.
Justin
wasn't thinking of it clearly.. you'd have to make sure your max last row was the 6th from last
i.e in that first part
<cfdirectory directory="#expandPath(imagesFolder)#" filter="*.jpg" name="getPics" action="list"/>
<cfset maxrows = getPics.recordCount - 5/>
<cfset startRow = randRange(1, maxrows)/>
This way the maximum last row would be the 6th from last (total-5), so you'll always get 6.
If you want it truly random, you could create a list from all of the names, then run listGetAt(randrange(1,maxrows)) against the list.
And, to prevent duplicates, you could use listdelete to remove the item from the list before getting another random selection.
btw, a nice way to see what all these functions are capable of is www.gotapi.com - just choose the coldfusion api
the interface is faster and slicker than adobe's own livedocs, and the auto-complete in the keyword search is really helpful if you aren't sure exactly what function to use ( start typing list - and you will see all the list functions that start with "list" )
of course, there are simpler ways to get what you are after but you're already there with this method, might as well keep going!