How to Display Images by Day of week

Report · Sep 28, 2020

Just a simple code to grab the image from a specfied folder without using any type of database
Then Parse it to the page by day of the week having named each image by day and changing out by day

Report · Sep 28, 2020

1) Simple code to grab the images from a specfied folder:

<!--- List files of type PNG or JPG from a directory--->
<cfdirectory
directory = "full\path\to\image\directory"
action = "list"
filter = "*.png|*.jpg"
name = "imagesDir"
type = "file">
<!--- uncomment the dump to see the list of files --->
<!--- <cfdump var="#imagesDir#"> --->

2) I don't quite understand what you mean by "parse it to the page" and by "changing out by day". I shall assume you want to extract files from the list, ordering them by name.

As imagesDir is a query object, you can use query of a query. For example as follows:

<!--- List of images whose name contains '_20190507' --->
<cfquery dbtype="query" name="getImagesByDay">
	select * 
	from imagesDir
	where name like '%_20190507%'
</cfquery>
<!---<cfdump var="#getImagesByDay#">--->

<!--- Loop across the list of images, extracting and collecting the names that correspond to a particular date --->
<cfset img20180507 = arrayNew(1)>
<cfset mondayImages = arrayNew(1)>
<cfset tuesdayImages = arrayNew(1)>
<cfloop query="imagesDir">
	<!---If a name matches, add it to the array --->
	<cfif findNoCase('20180507', imagesDir.name) gt 0>
		<cfset arrayAppend(img20180507, imagesDir.name)>
	</cfif>	
        <cfif findNoCase('monday', imagesDir.name) gt 0>
		<cfset arrayAppend(mondayImages, imagesDir.name)>
	</cfif>
        <cfif findNoCase('tuesday', imagesDir.name) gt 0>
		<cfset arrayAppend(tuesdayImages, imagesDir.name)>
	</cfif>
</cfloop>

<!---<cfdump var="#img20180507#" label="20180507 images"><br>--->
List of 20180507 images: <cfoutput>#arrayToList(img20180507)#</cfoutput>

Report · Oct 02, 2020

Knight Raven, does that help?

Report · Oct 02, 2020

I was thinking more like this javascript example to clarify things a bit more

http://demo.dougv.com/js_random_image_time/dayofweek.html

this is the code I was working with but throws and error

<SCRIPT LANGUAGE="JavaScript">
var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src="Rushed/Monday.jpg";
images[2] = new Image();
images[2].src="Rushed/Tuesday.jpg";
images[3] = new Image();
images[3].src="Rushed/Wednesday.jpg";
images[4] = new Image();
images[4].src="Rushed/Thursday.jpg";
images[5] = new Image();
images[5].src="Rushed/Friday.jpg";
images[6] = new Image();
images[6].src="Rushed/Saturday.jpg";
images[7] = new Image();
images[7].src="Rushed/Sunday.jpg";

function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src=images[useRand].src;
}
</script>

Report · Oct 04, 2020

Ah, that won't work. That's because you are mixing 2 separate environments.

Javascript code runs on the client's browser, of which there could be millions. Whereas ColdFusion code runs on ColdFusion server, of which there is usually just one. In particular, the ColdFusion server know nothing of the Javascript code.

Those are the generalities. Now, on to the specifics to help you to get this to work.

From this code, I am assuming the following:

A query has run and it contains the details of image files.
The name of each image is a day of the week, that is, it is from the set {Monday, Tuesday, Wednesday, ..., Sunday}. In general, the query may contain multiple images named Monday, multiple images named Tuesday, and so on.
You want code that will pick out a picture at random, whose name matches the name of the current day, and display it.

Here is some code that will do just that. It is 100% ColdFusion, involving no Javascript. 🙂

<body>
	
<!--- Query to fetch images and their properties --->
<cfquery name="rushedPics" datasource="myDSN">
	select *
	from myImgTBL
</cfquery>

<!--- 
Query of a query to fetch images whose name matches 
today's name. There may be multiple images having a given
name.
 --->
<cfquery name="rushed" dbtype="query">
	select name
	from rushedPics
	where name like '#dateformat(now(), "dddd")#%'
</cfquery>

<cfset nrOfPics = rushed.recordcount>

<cfif nrOfPics gte 1>
	<!--- Pick a random number between 1 and the total number of pictures--->
	<cfset randNumber = randRange(1, nrOfPics,  "SHA1PRNG")>
	
	<!--- Relative path of randomly selected picture --->
	<cfset relativePathImg = "votd/#rushed['name'][randNumber]#">
	
        <!--- Display randomly selected picture --->
	<cfoutput><img src="#relativePathImg#" width="150" height="113" border="0" alt=""></cfoutput>

</cfif>	

</body>

Report · Oct 04, 2020

Thanks for all the assistance I got it work now just added a table Named Banners into my own database for news etc..

Its just been awhile since I've coded in Cold Fusion

Adobe Community

How to Display Images by Day of week

1 Correct answer