Create Thumbnail Images with Rounded Corners

If you have been using Facebook, then you might have noticed thumbnail images with rounded corners in new Facebook homepage. If you would like to have similar effect for thumbnails in your application, then here’s a quick and easy way to do it.

We’ll be using phpThumb, the open source PHP script to generate thumbnails on the fly.

Download and extract phpThumb to somewhere in your website folder. Now to use a rounded corner thumbnail of an image, simply use the img tag of HTML with src as

<img src=”phpThumb.php?src=test.jpg&w=200&h=150&fltr[]=ric|20|20&f=png” />

Adjust the path to phpThumb according to where you place the phpThumb files. Now we have passed 5 parameters to phpThumb.php namely,

1. src is the path to image file relative to phpThumb.php

2. w & h are width and height of the resulting thumbnail

3. fltr is used to tell phpThumb to generate rounded corner thumbnail with first numeric value as horizontal radius of the rounded corner and second as vertical radius in pixels.

4. The last parameter f is used to control the output image format of the thumbnail, namely png, jpg or gif. We are using png as it can render images with transparent corners which can be used on any background.

That’s it, you have cool looking thumbnails with rounded corners.

Create thumbnails from images on a webpage with PHP

This page combines the two by downloading all the images from a specified web page and creating thumbnails for them.

The code

Note that the code downloads the images directly using file_get_contents and therefore needs URL aware fopen wrappers enabled to work. 

require_once('/path/to/simple_html_dom.php');

$html = file_get_html('http://www.cnn.com/');

$images = array();

foreach($html->find('img') as $element) {

    $images[$element->src] = true;

}

foreach($images as $url => $void) {

    $tg->generate($url, 100, 100, '/path/to/thumbnails/' . md5($url) . '.jpg');

}

The example downloads the www.cnn.com homepage and extracts all the images using the HTML DOM Parse, whose syntax works the same way as jQuery.

The images that are found are put into an array indexed by the full url; this effectively eliminates duplicates (which in the case of the CNN homepage at the current time includes a 1 pixel spacer image used many times).

This array is then looped through and the thumbnail images generated. I've named them using an md5 hash based on the full url with a .jpg extension/format in the example. This solves issues with pathing etc in the full URL filename.

The above example will create thumbnails that are a maximum 100x100 pixels.

CSS images won't be included

Note that the above example only gets images from the page which are defined with an <img> tag; any defined inline using CSS backgrounds etc or in a style sheet will not be downloaded.

Refinements to the script

The script could be refined to exclude images that are below a certain size (e.g images which are less than 100 pixels wide or 100 pixels high could be ignored) or of a particular format. You could do the latter with my thumbnail generation class by setting the allowable types. I'll have a look at these (and any suggestions made in the comments below) and post an update in a few days.

Create Thumbnail Images using PHP

This tutorial will describe how to create thumbnail images on the fly using PHP. Furthermore you will learn how to process a whole folder of images and create their thumbnails. Since this requires the GD library, you will need an installation of PHP with at least GD 2.0.1 enabled.

Below we will create a PHP script that contains two functions. The first one scans a provided directory for any .JPG images and, for each one, creates a thumbnail in the specified folder using the GD image functions. The second function creates an HTML file in the same directory as the script, which contains all of the thumbnails with links to the original images. This could be the basis of advanced photo gallery software.

The code below creates a function named createThumbs that will get three parameters. The first and the second is correspondingly the path to the directory that contains original images and the path to the directory in which thumbnails will be placed. The third parameter is the width you want for the thumbnail images.

<?php

function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth ) 

{

  // open the directory

  $dir = opendir( $pathToImages );

  // loop through it, looking for any/all JPG files:

  while (false !== ($fname = readdir( $dir ))) {

    // parse path for the extension

    $info = pathinfo($pathToImages . $fname);

    // continue only if this is a JPEG image

    if ( strtolower($info['extension']) == 'jpg' ) 

    {

      echo "Creating thumbnail for {$fname} <br />";

      // load image and get image size

      $img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );

      $width = imagesx( $img );

      $height = imagesy( $img );

      // calculate thumbnail size

      $new_width = $thumbWidth;

      $new_height = floor( $height * ( $thumbWidth / $width ) );

      // create a new temporary image

      $tmp_img = imagecreatetruecolor( $new_width, $new_height );

      // copy and resize old image into new image 

      imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

      // save thumbnail into a file

      imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );

    }

  }

  // close the directory

  closedir( $dir );

}

// call createThumb function and pass to it as parameters the path 

// to the directory that contains images, the path to the directory

// in which thumbnails will be placed and the thumbnail's width. 

// We are assuming that the path will be a relative path working 

// both in the filesystem, and through the web for links

createThumbs("upload/","upload/thumbs/",100);

?>

At first we open the directory with images and iterate through it, looking for all .JPG files. Next we create thumbnails for each image in the directory. To create a thumbnail, we read in the file using theimagecreatefromjpeg() function and calculate the new thumbnail size. imagesx() and imagesy()functions return the width and height of the image respectively. Next we create a new image using theimagecreatetruecolor(). Finally, we copy and resize the original file with the imagecopyresized() function and save thumbnail with imagejpeg().

The second part of the code creates the function named createGallery which gets two parameters (the relative paths to the directories in which images and thumbnails are stored) and creates an HTML page which contains all of the thumbnails with links to the original images.

<?php

function createGallery( $pathToImages, $pathToThumbs ) 

{

  echo "Creating gallery.html <br />";

  $output = "<html>";

  $output .= "<head><title>Thumbnails</title></head>";

  $output .= "<body>";

  $output .= "<table cellspacing=\"0\" cellpadding=\"2\" width=\"500\">";

  $output .= "<tr>";

  // open the directory

  $dir = opendir( $pathToThumbs );

  $counter = 0;

  // loop through the directory

  while (false !== ($fname = readdir($dir)))

  {

    // strip the . and .. entries out

    if ($fname != '.' && $fname != '..') 

    {

      $output .= "<td valign=\"middle\" align=\"center\"><a href=\"{$pathToImages}{$fname}\">";

      $output .= "<img src=\"{$pathToThumbs}{$fname}\" border=\"0\" />";

      $output .= "</a></td>";

      $counter += 1;

      if ( $counter % 4 == 0 ) { $output .= "</tr><tr>"; }

    }

  }

  // close the directory

  closedir( $dir );

  $output .= "</tr>";

  $output .= "</table>";

  $output .= "</body>";

  $output .= "</html>";

  // open the file

  $fhandle = fopen( "gallery.html", "w" );

  // write the contents of the $output variable to the file

  fwrite( $fhandle, $output ); 

  // close the file

  fclose( $fhandle );

}

// call createGallery function and pass to it as parameters the path 

// to the directory that contains images and the path to the directory

// in which thumbnails will be placed. We are assuming that 

// the path will be a relative path working 

// both in the filesystem, and through the web for links

createGallery("upload/","upload/thumbs/");

?>

First, we open the directory with thumbnails. Next we iterate through files in the directory and put the HTML into a string variable. The variable contents then written into a file using fopen(), fwrite(), andfclose() functions.

As you can see, adding on the fly generated thumbnails to your website with GD library and PHP is quite easy to accomplish.