Planning an image gallery

[MargateSteve]

This is a bit of preliminary question and I have not started any coding yet, but want to make sure that I go about this all the right way.

 

The website I am currently working on uses Qdig (http://qdig.sourceforge.net/) for it's image gallery. I have replaced all the other third party scripts that were there and this will be my last challenge. I have already tested some basic image uploads and that part of it is fine. However there are a few things that I want to make sure are implemented before I go too far.

 

I have put below the way I think it should work but if there is anything that seems like a bad idea, please let me know!!

 

The basic functionality would be....

• Choose a folder, although it most cases this will be chosen for you
  
• Upload several images at a time
  
• Upon upload insert the details into the database with other predefined variables as well as image size and dimensions
  
• Create two resized images for each upload, medium and thumb
  
• Open a form to add a caption and tags to the image in the database
  

 

Although most of it would be fairly straightforward, there are a couple of bits that I am not sure of.

 

With creating the medium and thumbnail versions, tutorials I have read have suggested uploading the images then reading the directory and creating the extra images there. However, there might be occasions where images are uploaded to an already populated directory so I would not want the images that have already been processed to be done again.

My feeling would be to create the extra images as part of the upload process but as I have never seen that suggested, I am not sure if there would be any problems with that.

Also, would it be better to create a thumbs and medium folder inside the parent directory or append the filenames of the new images with med_ and thumb_?

 

I have exactly the same issue with adding the details to the database. The tutorials I have read suggest scanning the directory and then inserting, but I would assume it would be more foolproof to insert the details as part of the upload process.

 

The last situation I want to plan properly is being able to delete/move images. Obviously there will be three different images (original, medium, thumb) for each one plus a database entry. What would be the safest way to move/change/delete all in one go?

 

As things stand, there is only going to be myself and two others that will be using the image upload facility and the area will be restricted to admins only there is no immediate risk of unsafe uploads. However, with an eye on future proofing (and in case one of us accidentally does something stupid) I will want to have some form of sanitisation in place.

Would a straightforward regex searching for a correct file extension be enough for this or would it be recommended to implement other checks (image size etc) from the outset to make sure it does not need much re-writing should it get to a point where other people can upload.

 

For those of you still here, thank you for persevering! Absolutely any advice, pointers or suggestion would be gratefully received!

 

Thanks in advance

Steve

[Barand]

Do not trust filename extensions, they can be faked. Use getimagesize which will return false, if it isn't a valid image, or file details if it's OK

[MargateSteve]

Thanks for that Barand.

 

One very important thing that I forgot to mention is as there are already over 100 folders, each containing between 10 and 30 images, I would like to be able to insert these images into the database and create the thumb and medium image. Would there be a simple way to do this or would it be best just to re-upload them with the new script?

 

Thanks

Steve

[kicken]

With creating the medium and thumbnail versions, tutorials I have read have suggested uploading the images then reading the directory and creating the extra images there. However, there might be occasions where images are uploaded to an already populated directory so I would not want the images that have already been processed to be done again.

My feeling would be to create the extra images as part of the upload process but as I have never seen that suggested, I am not sure if there would be any problems with that.

Also, would it be better to create a thumbs and medium folder inside the parent directory or append the filenames of the new images with med_ and thumb_?

 

There are a couple ways to do an image gallery, the way you were reading about where it suggest scanning the directory is probably for when you upload the images your self via FTP and then just point the gallery script at that directory.  If you want to do your own image upload process via HTTP uploads you can do the thumbnails / descriptions at that time if you want, there is nothing wrong with that really.

 

I personally prefer to do thumbnailing as part of the image viewing process.  That way if you need a new thumbnail size, or a thumbnail gets deleted after/never created during the upload it will still get created on the fly.  I do this with a caching process so it does not have to re-generate the thumbnail every time.  I save a new copy of the image in the folder with a name that looks like $originalFilename.'_'.$newWidth.'x'.$newHeight.'.'.$extension, so for example it might be AtTheParty.jpg_640x480.jpg.  That makes checking for an image of a particular size as easy as a file_exists check, and also allows for arbitrary sized images incase you end up later on needing images of different sizes (layout change for example).

 

I have exactly the same issue with adding the details to the database. The tutorials I have read suggest scanning the directory and then inserting, but I would assume it would be more foolproof to insert the details as part of the upload process.

 

The last situation I want to plan properly is being able to delete/move images. Obviously there will be three different images (original, medium, thumb) for each one plus a database entry. What would be the safest way to move/change/delete all in one go?

 

You'll just have to either find or track all the images and their thumbnails and run an unlink call on each one.  If you were to do a naming scheme like I typically do you could just run glob with the pattern to find the files. eg:

$files = glob($originalFilename.'*x*');
unlink($originalFilename);
foreach ($files as $thumb){ unlink($thumb); }

 

 

[Barand]

I'd write an adapted version of the script that would loop through a folder's contents and process all the image files in the folder.

 

Creating thumbs on-the-fly is good if you only display an image or two, but it can slow you down considerably with a gallery showing many per page.

[MargateSteve]

Thanks Guys, that has given me a lot to consider and read up on.

 

I think I will try to free up some time tonight to get some basic test code together so I have something physical to work with.

 

Thanks again

Steve

[xyph]

Do not trust filename extensions, they can be faked. Use getimagesize which will return false, if it isn't a valid image, or file details if it's OK

 

Please, elaborate on this. I understand someone could upload a PHP file as a JPG, but unless the system is set to execute JPG files with the PHP engine, I'm not sure how this would work?

[kicken]

Please, elaborate on this. I understand someone could upload a PHP file as a JPG, but unless the system is set to execute JPG files with the PHP engine, I'm not sure how this would work?

 

An improperly configured apache server will parse a file such as badimage.php.jpg for PHP code still.  It is still possible to upload php code in an image even with a getimagesize check though by including it in meta data.  Getimagesize or the fileinfo extension is just a better method of determining if the image is at least valid and prevent your script from trying to resize a .exe or something like that.

 

 

[MargateSteve]

I have hit a bit of a snag in the initial process code. I am trying to get some basic bits in place before I get onto the thumbnailling and sanitization and everything works fine, if there are no invalid files. However, as soon as a file gives an error, the same error is assigned to all remaining uploads, even if they follow all the rules, so they all fail.

 

I am sure I must have just misplace a brace or something silly but cannot find the problem. All of the error checks where initial grouped with and if...elseif...else but I separated them when I thought that was the problem.

 

If anyone can spot what it is I am overlooking, I will be very grateful!

 

Thanks

Steve

 

<?php 

$root='/home/mfcsteve/public_html/gallerytest/';
$upload_path = 'gallery/test1';
$maxsize = 5242880; 

if (isset($_FILES['upload'])) {
//Convert the files into an info array  
    $files=array(); 
    $filedata=$_FILES['upload']; 
    if(is_array($filedata['name'])){ 
        $files[]=array( 
        'name'    =>$filedata['name'][$i], 
        'type'  => $filedata['type'][$i], 
        'tmp_name'=>$filedata['tmp_name'][$i], 
        'error' => $filedata['error'][$i],  
        'size'  => $filedata['size'][$i]   
        ); 

foreach ($filedata['tmp_name'] as $key => $file){
$errormsg = '';
list($width, $height, $type, $attr) = getimagesize($_FILES['upload']['tmp_name'][$key]);
	  
//Check that it is an image...will add file specific checks later
if(!getimagesize($_FILES['upload']['tmp_name'][$key]))
{$fail=1;$errormsg .= 'Invalid File Type. Only images allowed.<br />';}

//Check file does not exceed maximum size
if($_FILES["upload"]["size"][$key] > $maxsize)
{$fail=1;$errormsg .= 'Image is too large. Maximum size 5mb.<br />';}

//Check dimensions		  
if ($width > 300 || $height > 800 )
{$fail=1;$errormsg .= 'Dimensions too large. Max size 300 x 800px.<br />';}


//Start the output
echo "<div class=\"wrapper\">\n"; 

//Check if anything has failed
if ($fail < 1 )
{//Nothing has failed so move the image		 
  move_uploaded_file($file, $upload_path."/{$_FILES['upload']['name'][$key]}");
  echo "Upload status: SUCCESS!<br />";
}
else
{//There was an error so show it
  echo "Upload status: FAILED!<br />";
  echo $errormsg."<br />";
}
//Show file details
    echo "<b>Filename: </b>".$_FILES['upload']['name'][$key]."<br>"; 
    echo "<b>Temp Filename: </b>".$_FILES['upload']['type'][$key]."<br>"; 
echo "<b>File Type: </b>".$_FILES['upload']['tmp_name'][$key]."<br>"; 
    echo "<b>Size: </b>".($_FILES['upload']['size'][$key]/ 1048576)."<br>"; 
echo "<b>Dimensions: </b>".$width." x ".$height."px<br><br /><br />";
    echo "</div>\n";    
}//End foreach
  }//End array  
}//End upload

?>

[MargateSteve]

I have worked out what the problem is but am not sure if there is a solution.

 

The images are being selected via a multipart form so the checks are being made during the upload to the temp folder. So as soon as one fails, the entire upload stops. Is there a way to carry on with the rest of the uploads if any of them fail?

 

Thanks

Steve

[xyph]

Where is $i defined?

[MargateSteve]

Oops. That is my novice incompetence showing through!

 

I believe it should be

if(is_array($filedata['name'])){ 
        $files[$i]=array( 

which I have now change.

 

However, the outcome is still the same. As it goes through the files, it uploads each one but as soon as it finds an error, everything else fails to upload.

 

Thanks

Steve

[xyph]

Again, where is $i DEFINED ?

[MargateSteve]

My understanding was that was self-generated from the data passed to the page (the form field upload[]). This was how I was told to do it ages ago, when I first started out and it has worked that way since so hadn't questioned it. However, looking at it afresh, it is clear that it is redundant as the form would not be defining $i so I have had a bit more of a read up and could see where I think was going wrong.

 

I have rewritten the first part of the code and $i is replaced by $key which, I believe is defined in the foreach statement. However, I must still have it wrong as I am getting exactly the same result..files upload fine until one errors and then all error.

 

if (isset($_FILES['upload'])) {
//Convert the files into an info array  
    $files=array(); 
    $filedata=$_FILES['upload']; 
    if(is_array($filedata['tmp_name'])){ 
      foreach ($filedata['name'] as $key => $file){ 
   $files[$key]=array( 
        'name'    =>$filedata['name'][$key], 
        'type'  => $filedata['type'][$key], 
        'tmp_name'=>$filedata['tmp_name'][$key], 
        'error' => $filedata['error'][$key],  
        'size'  => $filedata['size'][$key]   
        ); 

$errormsg = '';

list($width, $height, $type, $attr) = getimagesize($_FILES['upload']['tmp_name'][$key]);
//from this point code is unchanged