How to make random images appear on your index.php site?

Hi!

First of all, I am not sure if I post this in the correct sub-forum, and if that is the case, I apologize and ask that the thread is moved to the correct category.

Anyway. I am pretty new with web design, and I am currently learning about the subject on high school. We work on software that is a bit outdated (Adobe CS3), but I still like doing it. As for web design, we use WAMP server, Dreamweaver CS3, MySQL Query Browser and PHP. I do, however, know little to nothing about coding in PHP, I just kind of know what it’s for. I know how to make a functioning web page, how to create databases and connect them to the web page, and how to show these databases through a dynamic web page, but little else.

The thing I am trying to do is to make random images from a certain folder on my computer appear randomly, one at a time, on my index.php site. The book, however, barely says anything related to this, and the teacher isn’t over-educated, to put it that way. I have almost no clue on how to start, I only have a “images”-folder with the pictures in my root-folder, and I imagine that I have to make a simple table in Query Browser with the image names next. But after that, I have no clue. I have googled around to try and find out, but haven’t find anything helpful. Anyone got any suggestions?

Once you have the table with image names, you can then extract one randomly by using this query


SELECT
    imagename
FROM images
ORDER BY RAND()
LIMIT 1

Since you already have some knowledge of displaying database data in a dynamic web page, I’m sure you can figure out how to create the <img> tag using the imagename returned by the query.
If not, post your code here and someone will be able to lend you a hand.

You can read the folder contents ( glob or file_get_contents? ) into an array and randomly pick an item from the array.

I can not add any code at the moment as I am at work :eek:

Hm, I didn’t quite make it work, so to make sure you understand where I went wrong (or what I will have to do next), I’ll go through what I did step-by-step.

  1. I created an index.php web page in dreamweaver, and connected it to my already existing database.

  2. I put the images I wanted in a folder, and created a table in my database named “images”, and only made it contain the primary key, which was “imagename”.

  3. I added the image names manually in Query Browser.

  4. Under “bindings” in Dreamweaver, I added a Recordset (Query) named “images”, and made it contain what you wrote above:
    “SELECT images.imagename
    FROM images
    ORDER BY RAND() LIMIT 1”

  5. I then tried to add some code, and wrote

<p><img src="imagefolder/<?php echo $row_images['imagename']; ?>" width="400"/></p>

Then some sort of image/element appears in dreamweaver, showing a tree and a lightning (not one of the images I added), but when opening the page in a web browser, it only shows a white square with the typical red cross in the upper left.

Here is the code:

<?php
   $img_files = array();
   if ($handle = opendir('.')) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != ".." && !is_dir($entry)) {
            $img_files[] = $entry;
        }
    }
    closedir($handle);
    $max = sizeof($img_files)-1;
    $random = rand(0,$max);
    echo '<p><img src="'.$img_files[$random].'" alt="NA" />';
}
?>

Note: it is assumed that the folder contains only image files.

Uhm, still not working. Shall I change anything in the code above? Such as replacing img_files with something else? Also, is the code on the fifth, sixth and seventh line of that code (or anywhere else, really) supposed to have extra space behind it with tab or something? Also, not all the code has the same color as the code you wrote…

As you may understand, we have learned almost nothing about coding on our own.

You have to save the file as something like index.php in your images folder the go to the index.php page in your URL.

This code will display every file in the folder not just image files.

The page is saved as index.php, and there are only images in the folder. Right now, my code is like this:

<?php
        $img_files = array();
		if ($handle = opendir('.')) {
		while (false !== ($entry = readdir($handle))) {
		if ($entry != "." && $entry != ".." && !is_dir($entry)) {
		$img_files[] = $entry;
		}
		}
		closedir($handle);
		$max = sizeof($img_files)-1;
		$random = rand(0,$max);
		echo '<p><img src="'.$img_files[$random].'" alt="NA" />';
		}
		?>

I also have tried a different way:

<img src="imagefolder/<?php echo $row_queryname['primarykey']; ?>" width="400" alt="<?php echo $row_queryname['primarykey']; ?>" />

On the bottom of the code-area, it also says:

<?php
mysql_free_result($queryname);
?>

Is it certain that I have not made any mistakes before trying the code…? Or is it just the code that is a mess?

Post the code you are using and we will make the necessary changes for you.

It is the code that is in my last post:

The code is complete and will run - it is NOT using a database.

Please replace the code in your index.php with the code below:

<?php
   $img_files = array();
   if ($handle = opendir('.'))
   {
	   while (false !== ($entry = readdir($handle))) {
		   if ($entry != "." && $entry != ".." && !is_dir($entry)) {
			   $img_files[] = $entry;
		   }
	   }
	   closedir($handle);
	   $max = sizeof($img_files)-1;
	   $random = rand(0,$max);
	   echo "max=$max, random=$random<pre>";print_R($img_files);echo "</pre>";
	   echo '<p><img src="'.$img_files[$random].'" alt="NA" />';
   }
   else
   {
	   echo "<p>Unable to open current directory</p>";
   }
?> 

If you could, give us the link so that we can see it.

Oh? What do you mean, that I have failed to connect to the database/failed with the query? The only thing I have in my database is, as mentioned, one table with the filenames of the pictures primary keys.

@tom8: I use a localhost, so I guess I cannot link it to you?

Also, after using that code, the web browser just lists up the different .html and .php pages that I have made as text.

And again, I am not supposed to change any of the content in the code?

The thing I am trying to do is to make random images from a certain folder on my computer appear randomly, one at a time, on my index.php site.

No mention of a database here - the code posted does not use a database. Do you want to use a database?

Yes.

Edit: Or, if it isn’t necesarry, I am open to suggestions. But since we are working with databases, it would be nice using one.

From what you telling me, it seems that there are no image files in the folder.

Please create a folder and place couple of image files there and run the index.php again.

Make sure to update the index.php with the code below and change the name my_images_folder to one that you named:

<?php
   $img_files = array();
   if ($handle = opendir('./my_images_folder')) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != ".." && !is_dir($entry)) {
            $img_files[] = $entry;
        }
    }
    closedir($handle);
    $max = sizeof($img_files)-1;
    $random = rand(0,$max);
    echo '<p><img src="./my_images_folder/'.$img_files[$random].'" alt="NA" />';
}
?>  

THERE we are! Finally, that last piece of code did the trick. I was just doing it on a test-page this time, and will try and make a more comprehensive site tomorrow, so I’ll come back if it for some reason doesn’t work. But thanks a bunch anyway, you’ve been to great help!

But I notice that this code doesn’t use a database - do you have the code for using a database as well? If it takes alot of time to do, it isn’t necesarry, but I would be happy to know more ways to do this.

If you only need one image each time the page is loaded then once you’ve got the array with the images you could use array_rand() to pick one at random.

Are you actually storing the images in the database or are they stored in the file system with the database recording the file details (name, size, extension, etc)?

The latter. Also, the random function is already working as you describe.