Need an image gallery...any thoughts?

Discussion in 'Web Design and Development' started by LastLine, May 23, 2007.

  1. LastLine macrumors 65816

    Joined:
    Aug 24, 2005
    #1
    Hey all,

    So I'm working on a way to produce a image hoesting website (For personal use only here) and I'm having trouble creating a straight forward gallery now.

    Needs:
    To Thumbnail images
    To link said thumbnails to another page of some sort showing a large image.
    To be easily updated on a daily basis - shouldn't involve re-writing a whole page each time I want to add a single photo.
    To be cheap/free

    Ideals:
    To be able to tag photos - like in a blog, so someone could say click a link that says "Flowers" and the site displays all the flower images.
    To allow commenting and/or rating of the photos


    Can anyone help me out here?
     
  2. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #2
    Erm if you have PHP theres a really easy way of doing this, i hope you have some skills in coding?

    Ive attached a PHP file which opens a specified thumbs folder, in your case this would be a "/thumbs" folder I guess.

    It then searches that folder for any images (.jpg), displays them, and when clicked it will then display the image (must have same filename as thumb) but from a pictures folder , "/pictures".

    you should see the print loop in the file, this is pretty easy to modify to exactly what you need if you do want to make it custom.

    PHP:
    <?php
    $thumb_dir
    ="thumbs";
    $image_dir="images";

    print
        
    $dir=opendir($thumb_dir);
        
    $img_string= array();
        while (
    $file=readdir($dir))
        {
            if(
    substr($file, -3) == "jpg" || substr($file, -3) == "jpeg" )
            [
                
    $tmp_str =
                        
    '<p>
                        <a href="'
    .$image_dir.'/'.$file.'">
                        <img src="'
    .$thumb_dir.'/'.$file.'"/>
                        </a>
                        </p>'
    ;                    
                
    array_push($img_string$tmp_str);
            }
        }
        
    sort($img_string);
        for(
    $i=0$i<count($img_string); $i++)
        {
            print 
    $img_string[$i];
        }
    closedir($dir);
    ?>
    Other than that check sites like www.HotScripts.com , they are usually great for things like this.

    hope i was of some help :)
     

    Attached Files:

  3. LastLine thread starter macrumors 65816

    Joined:
    Aug 24, 2005
    #3
    I have some basic (but developing) PHP skills so I'll give this a go - I've never installed php onto my Mac though (or do I even have to? lol I've always used the university machines for test runs so far)

    I'll give it a go!

    Edit: Ok yeah, that looks logical and makes sense, now I've just got to figure out hwo to install php on OS X - my web hosting has yet to be confirmed payment wise.
     
  4. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #5
    yeh i think an Apache server comes built into osx so installing php shouldnt be too much hassle.
     
  5. LastLine thread starter macrumors 65816

    Joined:
    Aug 24, 2005
    #6
    You'd really think wouldn't you? ;-) Can't get my head round it for the life of me.
     
  6. LastLine thread starter macrumors 65816

    Joined:
    Aug 24, 2005
    #7
    Ok yeah, definitely having trouble installing php on OS X, anyone give me a complete step by step here? Have found some on sites but nothing that's in complete basic.

    Arrgh, this is something I actually find easier on Windows :confused:
     
  7. desenso macrumors 6502a

    desenso

    Joined:
    May 25, 2005
  8. AlexH macrumors 68000

    AlexH

    Joined:
    Mar 7, 2006
    #9
    ZenPhoto is light, straight forward, and free, but might be too simple for your needs, I'm not sure.

    ZenPhoto
    http://zenphoto.org

    My ZenPhoto Gallery (use it as a demo, see if you like it)
    http://alexchronicled.com/zen/


    Edit: looks like desenso beat me to it... :)
     
  9. murfle macrumors regular

    Joined:
    Mar 7, 2007
    #10
    I've installed a PHP app called "Gallery 2" for a production site, that allows customers to upload photos through the web, and be able to view it on their DSL/IP based TV service. Works really well. of course, we modified things on our own to make the publish to the TV, but 'out of the box' it does everything you need, and has a good support community.

    Gallery Website

    As I'm sure you know by now, there are tons of options out there for you. I'd say find the one with the community support.
     
  10. LastLine thread starter macrumors 65816

    Joined:
    Aug 24, 2005
    #11
    Ok, so it's getting somewhere now - I've used what you suggested yargan, and it seems to work - just two questions for you.

    With what's in the $tmp_str, I assume I can basically stick a whole html page, complete with CSS in there if I like?

    Secondly, why do I get this rescource ID message at the top of the page?

    http://www.nofearspunk.com/index.php

    and finally, I found a JS lightbox script I used, but I've never managed to get javascript to work in pages generated via PHP - is this even doable?

    Thanks for all your help so far people :)
     
  11. LastLine thread starter macrumors 65816

    Joined:
    Aug 24, 2005
    #12
    An update:

    I've found a gallery that does the job for me very nicely - www.clarkephotography.co.uk

    Just a few trimings to add to the proverbial turkey.

    The code used to display the thumbnails is as follows

    Code:
    <?php
    /*************************************************
     * Micro Photo Gallery
     *
     * Version: 1.0
     * Date: 2007-04-05
     *
     * Usage:
     * Just copy these files into your image folder
     *
     ****************************************************/
    
     $columns     = 5;
     $thmb_width  = 120;
     $thmb_height = 80;
    
    function resizeImage($originalImage,$toWidth,$toHeight){
        
        // Get the original geometry and calculate scales
        list($width, $height) = getimagesize($originalImage);
        $xscale=$width/$toWidth;
        $yscale=$height/$toHeight;
        
        // Recalculate new size with default ratio
        if ($yscale>$xscale){
            $new_width = round($width * (1/$yscale));
            $new_height = round($height * (1/$yscale));
        }
        else {
            $new_width = round($width * (1/$xscale));
            $new_height = round($height * (1/$xscale));
        }
        // Resize the original image
        $imageResized = imagecreatetruecolor($new_width, $new_height);
        $imageTmp     = imagecreatefromjpeg ($originalImage);
        imagecopyresampled($imageResized, $imageTmp, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
    
        return $imageResized;
    } 
    
    function generateThumbnails(){
    	global $thmb_width,$thmb_height;
    	
    	// Open the actual directory
    	if ($handle = opendir(".")) {
    		// Read all file from the actual directory
    		while ($file = readdir($handle))  {
    			// Check whether tha actual item is a valid file
    			if (is_file($file)){
    				// Check whether the actual image is a thumbnail
    	      		if (strpos($file,'_th.jpg')){
    	      			$isThumb = true;
    	      		} else {
    		      		$isThumb = false;
    		      	}
    	      	
    	      		if (!$isThumb) {
    		      		// Process the file string
    	      			$dirName  = substr($file,0,strpos($file,basename($file)));
    	      			if (strlen($dirName) < 1) $dirName = '.';
    	      			$fileName = basename($file);
    	      			$fileMain = substr($fileName,0,strrpos($fileName,'.'));
    	      			$extName  = substr($fileName,strrpos($fileName,'.'),
    	      								strlen($fileName)-strrpos($fileName,'.'));
      					
    	      			// Check if the actual file is a jpeg image
    	      			if (($extName == '.jpg') || ($extName == '.jpeg')){
    			    		$thmbFile = $dirName.'/'.$fileMain.'_th.jpg';
    			    		// If a thumbnail dosn't exists tahn create a new one
    			    		if (!file_exists($thmbFile)){
    				    		imagejpeg(resizeImage($file,$thmb_width,$thmb_height),$thmbFile,80);
    				    	}
    					}
    	      		} 
    	   		}
       		}
    	}
    	
    }
    
    function getNormalImage($file){
    	$base = substr($file,0,strrpos($file,'_th.jpg'));
    	if (file_exists($base.'.jpg')) return $base.'.jpg';
    	elseif (file_exists($base.'.jpeg')) return $base.'.jpeg';
    	else return "";
    }
    
    function displayPhotos(){
    	global $columns;
    	generateThumbnails();
    	$act = 0;
    	// Open the actual directory
    	if ($handle = opendir(".")) {
    		// Read all file from the actual directory
    		while ($file = readdir($handle))  {
    			// Check whether tha actual item is a valid file
    			if (is_file($file)){
    				// Check whether the actual image is a thumbnail
    	      		if (strpos($file,'_th.jpg')){
    					++$act;
    					if ($act > $columns) {
    						echo '</tr><tr><td class="photo"><a href="'.getNormalImage($file).'"><img src="'.$file.'" alt="'.$file.'"/><br>'.$file.' </a></td>';	
    						$act = 1;
    					} else {
    						echo '<td class="photo"><a href="'.getNormalImage($file).'"><img src="'.$file.'" alt="'.$file.'"/><br>'.$file.' </a></td>';	
    					}
    	      			
    	      		}
    	      	}
    		}
    	}	
    }
    
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    <head>
       <title>Micro Photo Gallery</title>
       <link href="style/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div id="main">
        <div class="caption">Ray's Gallery</div>
          <table align="center"><tr>     
        		<?php displayPhotos(); ?>
          </table>		
        		
    	<div id="source">Ray's Gallery - Work in Progress.</div>
      </div>
    </body>   
    Which does a very nice job - currently I'm using <br>'.$file.' to display in the table a copy of the pictures filename, however the _th.jpg is rather annoying, can a nyone think of a way looking of the code, of displaying the filename, but say stripping it of the last 7 characters of the string? So rather than displaying pic1_th.jpg it displays pic1.


    Thanks for all the help so far!
     
  12. tutubibi macrumors 6502a

    tutubibi

    Joined:
    Sep 18, 2003
    Location:
    localhost
    #13
    You may also want to checkout DAlbum, it's open source and pretty powerful (thumbnails, easy updates).
     
  13. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #14
    sorry i took ages to reply.
    erm, stripping characters is done like so,

    PHP:
    $trimname substr($file0, -7);
    where -7 is the number of characters to trim.

    and then use:
    PHP:
    <br>'.$trimname.'
    -------------------
    example:
    PHP:
    $file "pic1_th.jpg"
    $trimname substr($file0, -7);
    Print 
    $trimname;
    would print:
    HTML:
    pic1
    it that what you wanted?

    hope that helps
     
  14. LastLine thread starter macrumors 65816

    Joined:
    Aug 24, 2005
    #15
    Nope - don't apologise - that looks perfect, I'll go play with it before moving onto my next task.

    (That is creating a page where a user can upload one or more files to a folder on the ftp via html/php)
     
  15. LastLine thread starter macrumors 65816

    Joined:
    Aug 24, 2005
    #16

Share This Page