Skip to main content
Knight Raven
Participant
September 28, 2020
Answered

How to Display Images by Day of week

  • September 28, 2020
  • 1 reply
  • 474 views
  1. Just a simple code to grab the image from a specfied folder without using any type of database
  2. Then Parse it to the page by day of the week having named each image by day and changing out by day 
    This topic has been closed for replies.
    Correct answer Knight Raven

    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:

     

    1. A query has run and it contains the details of image files.
    2. 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.
    3. 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>
    
    

     


    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  

     

    1 reply

    BKBK
    Community Expert
    Community Expert
    September 29, 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>

     

     

     

     

     

     

     

     

     

     

    BKBK
    Community Expert
    Community Expert
    October 2, 2020

    Knight Raven, does that help?

    Knight Raven
    Participant
    October 2, 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>

    <body OnLoad="swapPic()">
    <CFOUTPUT QUERY="Rushed" MAXROWS=7 startrow="1">
    <CFSET Rush = #Left(Name, Len(#name#)-4)#>
    <CFSET day = #DateFormat("#Now()#", "dddd")#>
    <CFIF Rush EQ day>
    <img src="Votd/#Rushed.name#" WIDTH="150" height="113" BORDER="0" ALT="">
    </cfif>
    </CFOUTPUT>