I was wondering how to get images from a site the same way like Digg or Facebook do, where it is only necessary to provide a link, and images get automatically uploaded to your server and resized. So, I decided to create a script that does exactly that and share it here.

This PHP script uses two php classes that I found on the web. One of them I have already used before in the “jQuery Image Cropper with Uploader” and the “Dynamic jQuery Image Gallery with Uploader“, the class.upload from verot . The other is a PHP html DOM Parser that can be found here.

In order to make this work, I had to change some few lines of code in verot’s class, so that URLs can be used to get images.  The DOM Parser is untouched. I also created a file (index.php) where both scripts are called. I first parse the URL, search for images and pass the url of the image to the class.upload script, which then uploads the image to a local directory (images/) and resizes it. In this script, the image size is changed to a width of 150 pixels but the ratio is kept. However, you can change these values and configure it the way you want. Take a look at the documentation of the class.upload so that you know what you can change. Also, you can specify how many images you want to save / display per request.

For the demo which has this blog as “target”, I have configured that only a restricted amount of images are saved and shown. Besides, you might notice that sometimes it displays more images than other times. This is caused by the limited amount of memory configured in the php.ini file (memory_limit), so you might wanna change this value to a proper one if you want to use this script. Again, on verot’s web site, in the forums,  there are some good calculations giving an idea of a suitable value.

View demoDownload source

Here’s an updated version of the Image Cropper. The upload button was replaced by an overlay on the image. There are also some extra functionalities :

• invert the picture colors
• rotate the image
• sepia
• transforms an image into greyscale

see the DEMO
download the source code here

Please check the updated version here!

Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script.

The idea is that the user uploads a picture,  selects which area to crop and saves it under a specific directory.
The process then creates two images, one 100×100 and a thumbnail of 50×50. You can easly change the script to create the amount of pictures and sizes you need!

The example here is limited to .jpg images and no more than 800 kb. If you want to add more file types and increase the size, you can configure it when you call the uploadify script (index.php):

'fileExt'         : '*.jpg',
'sizeLimit'      : '819200',//max size bytes - 800kb

and in upload.php:

$handle->file_max_size = '819200'; // max size

Note that an usual error is due to the configuration of the “memory_limit” in php.ini. You should increase this value if you expect to upload larger images.

see the DEMO
download the source code here
Please check the updated version here!

1. uploadify
2. ad-gallery
3. class.upload.php

click on the image to see a demo

It’s easy to find a lot of good image galleries out there, a lot of upload scripts and thumbnail generators. But I found it hard to find one script that includes them all, so I decided to try to integrate them in one, which is actually what is interesting to have in a site. I basically put them together and added one or two functions to the whole thing, and added some Ajax script to load the pictures.
So now, besides being able to see the gallery, which is pretty cool by the way, you can upload multiple image files (for this demo just jpg and gif, although you can configure what you want) next to it and have them added to the gallery on the fly, after the upload is finished (you can click on “last uploads” in the demo to see the last images). If you don’t want that the images are loaded immediatly after you upload them, then just remove the onAllComplete option in the innitialization of the uploadify plugin, in index.html.
Because this is a demo I limited the pictures size that you can upload to 500kb, and you can just upload 5 at a time. Of course then you can configure this as you like.
For the thumbs and images generator, I use the class.upload.php script  (very nice work), and I call it in the file uploadify.php. There you can configure the way you want your pictures to be generated, both original and thumbnail (for example the sizes, the filenames, the maximum size, if you want that pictures with the same name are replaced …). For this script I generate a hash for the name of the files, which will be always different. You can change that if you want… Remember that the folder where the pictures are stored (images and images/thumbs) should have the right permissions in order for you to upload your files.

I would suggest that you take a look at the possible configurations for each one of the scripts that I used:

• for the class.upload.php here
• for the uploadify here
• for the ad-gallery here

see the DEMO

download source code here

You can find more jQuery Image Galleries here

If you have any suggestions for this script, or if you find some bugs please let me know.