Image upload and management

PHP
1

Hello guys & gals,

I’m currently producing a couple of sites for people who would like to be able to upload images and then assign them to various “products”, already within a mySQL/PHP driven system that I’ve written.

I’d like to eventually be able to output the images on the front end in different ways (for instance: have a primary product image and then sub-images (all thumbnails) which, when clicked, will display a lightbox full-sized version). Kind of similar to a typical shopping cart product I guess, but it isn’t a shopping cart. Just a list of products.

The thing I’m struggling with (and yes, I’ve read the sitepoint article entitled “Build An Automated PHP Gallery System In Minutes” and also much of its forum page here) is finding a decent guide/tutorial, using up to-date PHP5 standards (eg. mysqli) etc.

What I want to be able to do on the backend is have a separate section within the admin called “Image Management” (or whatever).

When the admin clicks into that, they can see a “gallery” of all the thumbnails of their current images. From here they can either delete or add new ones.

From the “product management” end of the admin, I’d like some way of being able to associate any number of the uploaded images (from the “image management” area) with the product. Presumably this would best be done via drop-downs, populated with the image names.

Trouble is, I don’t know where to find any decent pre-written scripts, which I can manipulate, or which bits of the afore-mentioned sitepoint tutorial (written in 2003) to mod.

Any help/ideas/suggestions would be gratefully received at this point! :slight_smile:
Thanks! :smiley:

Alex

2

Hey Alex,

Thanks for the reply :slight_smile:

Yeah, I was going to use Imagick - it’s installed on my servers. I like your ideas, the thing I’m having problems with is how to achieve that result! I’m a bit “all at sea”.

Alex

3

Hi Alex,

I personally prefer Imagick, but it’s not as well documented as GD yet, and I think more servers have GD installed than Imagick. If you have Imagick on your server, then you really should use it though as it has a lot of nifty effects and functions for modifying images. It’s also a little less verbose than GD, and I find it easier to use.

How I generally work with uploaded images is that they are stored unaltered on the server, and when it needs to be displayed, the ‘system’ modifies the image (resizes, borders, rounded corners etc.) and then saves a copy of the modified image to a cache. next time it’s requested, the ‘system’ sees that it’s already in the cache, and just serves that instead. This also means that you still have the unaltered version, which is handy if you want to display it somewhere else with different modifications applied to it.

There are a few classes and libraries available that can do this kind of stuff for you.

Back to the uploads:
I think what would be best is to work something like this:
1 - the admin creates a new ‘gallery’ in your application. This gallery is just a folder somewhere on disk (e.g. ‘bill’ or ‘polly’ from the above example).
2 - using something like swfupload they can upload a bunch of pictures to that folder
3 - when they create or edit a product, the system scans the ‘photos’ directory for all the galleries, and presents a dropdown with the list of galleries
4 - the admin chooses one, and that choice is saved to the product

Now, when the product is displayed, the application knows which gallery it should display. It then looks in that gallery (i.e. folder, such as photos/polly) and works out which pictures there are in there, and displays them.

Would that work? It removes the need of storing all the filenames in the database, and the admins can upload as many pictures into as many galleries as they want.

You could use existing upload managers, but you’ll end up hacking them a lot anyway to work the way you want. Build one yourself (with help from Sitepoint if needed) and it’ll do exactly what you want and work better too :wink:

  • Alex (yes, we have the same name :wink: )
4

Will you (or other admins) be uploading all the images manually? Or will ‘regular’ users be uploading them.

If you have control over the file names, this an be quite an easy task. If you don’t have control, then it will require a little more work.

Let us know if you can control the filenames and then I can point you in the right direction to get started :slight_smile:

5

Hey Immerse - thanks for replying :slight_smile:

It will be admin-only uploading. The regular users will be customers of the pet shop, who are looking to buy the rabbit/puppy/duck/goose/giraffe/dinosaur that is listed as each “product”, so they won’t be contributing to the site in any way, just consuming it.

The customer will have control over the filenames prior to upload, and they’ll probably name it (for Bill the cat, for instance) bill1.jpg, bill2.jpg.

My worry is that they’ll upload massive files, so it’ll be important to have some kind of re-sizing thing when the images are output at the front end.

Any ideas?
Cheers buddy :slight_smile:

Alex

6

No worries. :slight_smile:

What’s your PHP level?

Break this up into steps:

  1. create page in your admin to view a list of directories (galleries)
  2. create page/ form to add a new directory (gallery)
  3. write code to actually create the directory on disk
    etc. etc.

Step 1)
I don’t know how your app works, but you need to add a new page (and menu item, possibly).

You also need to create the directory for storing the photos in (for example: /uploads/photos/).

In the new page, use PHP to read the contents of the directory you want to upload the galleries to (e.g. /uploads/photos/). To read the directory, you can use the opendir() function:


<?php
if ($handle = opendir('uploads/photos')) {
    while (false !== ($item = readdir($handle))) {
        if ($item!= "." && $item!= ".." && is_dir($item)) {
            echo "$item<br />";
        }
    }
    closedir($handle);
}
?>

That code will list all the directories (i.e. galleries) in the /uploads/photos/ directory.

That should be a nice starting point :slight_smile:

Once you’ve got the directory listing done, we can move on to the next step.

7

Hey Immerse,

For the re-sizing, I gather Imagik is preferable to GD, is that true?
Presumably, we’d allow the admin user (in this instance, the pet shop owner) to upload the images raw, and then re-size server side?

Regarding Uploading:

Yeah, you’ve kinda got it. Now the thing is, is that some “products” (animals) will have just the one picture. Others might have a number. I know it’d be easier just to say to the admin “well, you can only have up to 5 images per product”, but it’d be nicer if they can select any number of the images already on the server.

In terms of it becoming unmanageable, yes it could do, I just don’t know how many products they’re going to put on.

One thing I had thought is that when the admin uploads the images, their file names are loaded into a table in the db.

Then when the admin goes to add/edit a product, in addition to filling-in the fields such as “Name”, “Breed”, “Description”, etc they have number of drop-downs from which they can select the filenames of the photos they want to associate with that product.

Thanks for your help :slight_smile:

Alex

8

For the resizing on the frontend, you should investigate the GD and [URL=“http://nl3.php.net/imagick”]Imagick libraries. There are lots of examples about resizing on the documentation pages.

As for the uploading, if the admin is uploading everything, then you could possibly link the pictures to the products by how you save them on the server.

Imagine the following folder structure:


photos/
    -> bill
        -> 1.jpg
        -> 2.jpg
        -> 3.jpg
    -> polly
        -> 1.jpg
        -> 2.jpg
        -> 3.jpg

Now, when Polly the dinosaur is displayed, you could check the directory called /photos/polly/ for images, and then display those (using the aforementioned libraries).

Is that something that would work, or will there be so many products that it’ll be unmanageable very quickly?