Dynamic image page/gallery

[Petster]

Hey guys, new user / php coder here.

 

I'm working on a website for a band and they wanted the page to be easily updated. Even though I hadn't really done anything in php before, I agreed to do my best because I finally wanted to learn some php and we had a php course coming up at school. I'm now trying to make an image gallery that could be updated by just uploading the images in a certain folder. Basically, I have a folder (.../images/galleria/) which serves as a "root directory" for the gallery page. In this directory there will be subdirectories, for example "promopictures", "live", "fanpictures", and each of these subdirectories will contain subdirectories, for example, under the "promopictures" directory there would be subdirectories "Album 1" and "Album 2".

 

What I want to do is basically this: when the page loads, it prints the name of the final subdirectory (for example, "Album 1") and lists the thumbnails from that very directory. My friend had done something similar to this once and he shared his code with me, but obviously it wasn't exactly what I wanted so I had to do some changes to it. However, seeing that this website is my first "bigger" php project, the code got me stumped quite soon. This is what I have so far:

 

   // directory that contains the subdirectory that contains the images
   $rootDirectory = "images/galleria/promopictures";
   
   // the amount of thumbnails per row
   $thumbsPerRow = 5;
   
   listSubDirectories($rootDirectory);
   showThumbnails($folder, $thumbsPerRow);


   // function that lists the subdirectories of the given folder
function listSubDirectories($dir) {
      // read the root directory first
      $dArray = readDirectory($dir);
      
      // go through the subdirectories and files
foreach($dArray as $d) {
         if (is_dir($d)) {
            $pieces = explode("/", $d);
            $folder = $pieces[count($pieces)-1];
            
            print "$folder<br>\n";
         }
      }
   }

   // function displays the thumbnails from the given directory
function showThumbnails($folder, $thumbsInRow) {
      // read the subdirectories
         
         if (is_dir($p)) {
            $pics = readDirectory($p);
            
            $pieces = explode("/", $p);
            
            foreach($pics as $pic) {
               // skip the file if its name has "_tn" in it (for example something_tn.jpg)
               if (strpos($pic, "_tn") === false)
                  {            
                  $picCount++;
                  // make a link out of the thumbnail
                  
                  $pieces = explode(".", $pic);
                  $thumbnail = $folder."/".$pieces2[0]."_tn.".$pieces2[1];
                  
                  print "<a target=\"_blank\" href=\"$folder/$pic\"><img src=\"$thumbnail\"></a> \n";
                  
                  // insert <br> if there are $thumbsInRow amount of thumbnails in row
                  if ($picCount == $thumbsInRow) {
                     print "<br> \n";
                     
                     $picCount = 0;
                  }
               }
            }
         }
}	 

   // function reads the contents of a directory and makes it into an array
   function readDirectory($dir) {
      // if the last character of the directory name isn't /, add it
      if (substr($dir, -1, 1) != "/") {
         $dir = $dir."/";
      }
      // go through the directory
      if ($handle = opendir($dir)) {
         while (($file = readdir($handle)) !== false) {
            if ($file != "." && $file != "..") {
               if (is_dir($dir.$file)) {
                  $dirArray[] = $dir.$file;
               }
               else {
                  $dirArray[] = $file;
               }
            }
         }
      }
      
      closedir($handle);	
   
      return $dirArray;
   }
?>

 

Obviously, it doesn't work. I would have to get the name of the sub directory somehow, but I can't really figure out how. I do understand what the code is trying to do, but I just can't figure out how to fix it.

 

Any help would be greatly appreciated! Thanks in advance.

[acidglitter]

what i usually do for image galleries is have a mysql table and one field has the album name and another field has like the image name. for me that always made it easier to sort through pictures instead of using php to go through the actual folders...

[Petster]

I don't think there's much point in using databases for the kind of thing I want... it's not going to be a photo album, just a single page with images under different categories and titles.

 

Anyone else?

[dave420]

If you're not going to have metadata stored with the picture, use the directory structure to organise the files.  Then simply have PHP go through the selected folder to find out what pictures are in there, and spit out <img> tags however you want to in your design.  You can point those <img> tags to a script that spits out thumbnails (obviously caching them after generating them, otherwise your webserver might implode).  If you want metadata, I'd suggest using a database, possibly using the filename and path as the key to the entry in the database.  The only problem with that is if you move the file from one folder to another, the data won't follow it.  To overcome that, you could store a unique ID in the EXIF tags of the picture if PHP can't find one, which could be used as the key instead.

 

If your user wants to update it themselves, the simplest way is to set up their FTP access and let them upload their own pictures.  It's easier for you and them.

[Skipjackrick]

I did the same thing as mentioned.  I drop all of the images in a folder and then a small snippet of php gets the images.

 

http://www.ectackle.com/uploader/uploaded_files/teampage.php

 

I found this to be helpful.  http://www.webdeveloper.com/forum/showthread.php?t=96532

 

And then I used the Highslide JS to view the images.  http://vikjavev.no/highslide/

 

Then I found a nice thumbnail generator here.  http://www.hotscripts.com/

 

Then searching the forum I found a little snippet of code that will get the images.

 

<?php
//  Enter the directory for your server in 'your directory'
//  Be sure to enter the location of your thumbnail generator 'show_image.php?filename=$file&width=100&height=100'


if ($handle = opendir('your directory')) {
    while (false !== ($file = readdir($handle))) {
        if (preg_match('/\.jpg$/', $file)) {
            echo "<a href='$file' onclick='return hs.expand(this)' class='highslide'>\n";
            echo "<img src='show_image.php?filename=$file&width=100&height=100' alt=''/>\n";
            echo "</a>\n";
        }
    }
    closedir($handle);
}
?>

[Petster]

Thanks for the tips, everyone. The gallery is indeed supposed to be easily updated by the band. Time to get this thing finished now, if I happen to run into any problems, I know where to ask for help!

[Petster]

Okay, I did run into some problems. Half of the code actually works now, the part that reads the name of the subdirectory and prints it on the page. But getting the actual thumbnails on the page is giving me a headache. Here's my code:

 

<?php
   // the root directory which contains subdirectories
$rootDirectory = "images/galleria/promokuvat";
    listSubDirectories($rootDirectory);

   // function that lists the subdirectories of the forementioned root directory
function listSubDirectories($dir) {
      // first read the root directory
	$dArray = readDirectory($dir);
	// the amount of thumbnails per row
	$thumbsPerRow = 5;
      
      // go through folders and files
	foreach($dArray as $d) {
         // if it is a folder...
		if (is_dir($d)) {
			$pieces = explode("/", $d);
			$folder = $pieces[count($pieces)-1];
			print "$folder<br>\n";
			showThumbnails($folder, $thumbsPerRow);
		}
	}
}

    // function displays thumbnails from the given folder
function showThumbnails($folder, $thumbsInRow) {
        // 
	$kansio = readDirectory($folder); 
	foreach($kansio as $p) {
		if (strpos($p, "_tn") === false) {            
			$picCount++;
               
            // make a link of the thumbnail
			$pieces = explode(".", $p);
			$thumbnail = $folder."/".$pieces[0]."_tn.".$pieces[1];
			print "<a target=\"_blank\" href=\"$folder/$p\"><img src=\"$thumbnail\"></a> \n";
               
			// if the row contains $thumbsPerRow amount of thumbnail, insert line break
			if ($picCount == $thumbsInRow) {
                // Tulosta rivinvaihto
				print "<br> \n";
                	$picCount = 0;
			}
		}
	}
}

   // function reads the contents of the directory and returns an array of it
function readDirectory($dir) {
      // if the last character of the folder name isn't / then add it
	if (substr($dir, -1, 1) != "/") {
		$dir = $dir."/";
	}
      // go through the directory
	if ($handle = opendir($dir)) {
		while (($file = readdir($handle)) !== false) {
			if ($file != "." && $file != "..") {
				if (is_dir($dir.$file)) {
					$dirArray[] = $dir.$file;
				}
				else {
					$dirArray[] = $file;
				}
			}
		}
	}
	closedir($handle);	
	return $dirArray;
}
?>

 

Now I get the following errors:

 

Warning: opendir(testi/) [function.opendir]: failed to open dir: No such file or directory on line 55

 

Warning: closedir(): supplied argument is not a valid Directory resource on line 67

 

Notice: Undefined variable: dirArray on line 68

 

Warning: Invalid argument supplied for foreach() on line 29

 

'testi' is the name of the folder under /images/galleria/promokuvat/. As I mentioned in the beginning of this post, the part that reads the folder name and displays it on the page works just fine.

 

I would appreciate it a lot if someone could have a look at the code... I'm stumped. I'm afraid I don't have what it takes to fix this on my own.

[BlueSkyIS]

your call to opendir($dir) is failing because you aren't providing the full path. you need to include the full path for opendir(). you are giving it testi/ when it needs /images/galleria/promokuvat/testi/

[Petster]

Hmm. I tried opendir("/images/galleria/promokuvat/testi/"), but that gave me "Warning: opendir() [function.opendir]: open_basedir restriction in effect. File(/images/galleria/promokuvat/testi/) is not within the allowed path(s)". I couldn't use this one anyways, because the user has to be able to update the page by just uploading more images into subdirectories.

 

Trying opendir("/images/galleria/promokuvat/".$dir) on the other hand gave me "Warning: opendir() [function.opendir]: open_basedir restriction in effect. File(/images/galleria/promokuvat/images/galleria/promokuvat/) is not within the allowed path(s)".