Web Tips
Sharing our knowledge of CFML & jQuery and many other web development tips.
Sharing our knowledge of CFML & jQuery and many other web development tips.
I was tasked a few months ago to rotate an image on a site randomly. Ordinarily this would not be an issue but the image was a css background image and I really didn’t have the ambition to rewrite the css and page html to do this. Thankfully my laziness paid off, because I found a solution while looking through some php code for wordpress.
I ran into this template that I liked, but wanted to change the header image. I changed it, uploaded it and refreshed the page, but NOTHING changed. I spent a good 5 minutes on this before checking the css to see what was going on. Instead of finding a path to an image in the css for the background, I found a path to a file named rotate.php. The script was written by Matt Mullenweg (http://photomatt.net/scripts/randomimage) and seemed simple enough to me. What I liked about this script is that it didn’t require managing a bunch of images. If you want an image you simply stick it in a predefined directory and point to that directory.
I decided to rewrite this in coldfusion and within a few minutes I had a working. It is rather simple. Define your folder, define your extensions and define the url path to the folder and you are done. You will find the code below.
<cftry> <!--- created by Andrew Alba >> http://www.albawebstudio.com This will grab images from specified folder and randomly display them. You will only need to modify the three variables below ---> <!--- Insert the absolute path (with trailing slash) to the images. "/home/mysite/public_html/images/" or "/www/mysite/web/images/random/" If the images are in the same directory as this script you can leave it as shown file ---> <cfset folder = "#GetDirectoryFromPath(GetBaseTemplatePath())#" /> <!--- List of allowed extensions (separate with space) ---> <cfset ext = "jpg jpeg png gif" /> <!--- Insert the URL to the folder that contains the images ---> <cfset url_image_path = "http://www.homeshq.com/gfx/promotion/" /> <!--- do not edit below this point ---> <!--- lets get the contents of the folder ---> <cfdirectory directory="#folder#" action="list" name="filelisting" /> <!--- pull just file names out of the list ---> <cfset fileList = "" /> <cfoutput query="filelisting"> <cfif filelisting.type is "file"> <cfset fileList = listappend(fileList,filelisting.name) /> </cfif> </cfoutput> <!--- now we can create a new list of files ---> <cfset new_fileList = ""> <cfloop list="#fileList#" index="i" delimiters=","> <!--- lets use our list of extensions to weed out the files types we don't want ---> <!--- now we grab just the extension ---> <cfset file_ext = listlast(i,".") /> <!--- if it finds file_ext is acceptable as per ext then it adds it to the array ---> <cfif listfindnocase(ext,file_ext," ")> <cfset new_fileList = listappend(new_fileList,i) /> </cfif> </cfloop> <!--- now to choose random number from the list ---> <cfset image_file = listgetat(new_fileList,randrange(1,listlen(new_fileList),"SHA1PRNG"),",") /> <cflocation url="#url_image_path##image_file#?rand=#randrange(1,999999999,"SHA1PRNG")#" addtoken="no"> <cfcatch type="any"></cfcatch> </cftry>