Some time ago when I first started publishing photos to the web I used a php package called WihPhoto which used to be available form wihsy.com. I say ‘used to be’ because that site now only displays a dull ‘currently offline’ page. I used a very early version of it and I believe that follow-on versions got a lot of flack because there was a security hole in them. Anyway, I think that it is a shame that it does no longer seem to be updated as it is a great package.

That said, with time I became more and more demanding in terms of what functionalities I wanted it to have and in terms of integration with the general layout of my site. With no ongoing development I had no choice but to add those functionalities myself.

Amongst the various enhancements that I added to it was the ability to generate square thumbnails and I guess you could say that it was a two step process.

  • 1 – Generate square thumbnails
  • 2 – Get rid of the ‘jags’ in the pictures

In this post I’ll discuss how you can generate square thumbnails using php.

The first reason for which I wanted to generate square thumbnails is because I used to post digital pictures that were both in landscape and portrait mode. The thumbnails generated were just resized versions of the larger pictures – so I ended up with landscape and portrait mode thumbnails. This causes some issues in terms of layout because the width of a portrait mode picture is obviously less than that of landscape mode pictures. This means that your page could have thumbnails arranged as below:

That does not look very nice. With a bit of simple code you could have your page look something like that shown below. I.e you could centre align all you thumbnails. It’s better, but it is not good enough. Also you could have a mix of portrait and landscape mode thumbnails on a line. You layout could look like this.

Everything is nicely centered, but it is not visually appealing. So in came the idea of square thumbnails. What I find great with square thumbnails is that you do not use the complete picture to generate the thumbnails, i.e you call on your visitors’ curiosity to show them part of the picture. Another great advantage of square thumbnails is control: If you generate thumbnails that are 100*100 pixels you know exactly how much space you are going to need if you put 5 of them on a line.

Now to be clear I’m not talking about taking 640*480 picture and resizing it to 100*100 either – we respect the original height to width ratio of the subject.

So here it goes. We’ll start with the picture shown below. The original is a 640*480 picture.

The first step consists of reading the dimensions of the picture and figure out which of the height or width is the smallest dimension.

Depending on which of the two is the smallest dimension I make them both equal and from then on we can work out the square are we’re going to be be working with.

This generates thumbnails that have the same width and height and allows for a layout to look like so:

And here is the code that I use to generate those thumbnails. Basically I use a function because the thumbnail creation process can happen in numerous places, but it’s only coded once. Hope it helps someone out there!

The $ImageTool used is ‘GD’.

function CreateSquareThumb($source,$dest,$border=0) {

    $new_width = 100; //
    $new_height = 100; //
    $sourcedate = 0;
    $destdate = 0;
    global $convert;
    if (file_exists($dest)) {
       clearstatcache();
       $sourceinfo = stat($source);
       $destinfo = stat($dest);
       $sourcedate = $sourceinfo[10];
       $destdate = $destinfo[10];
    }
    if (!file_exists("$dest") or ($sourcedate > $destdate)) {
       global $ImageTool;
       $imgsize = GetImageSize($source);
       $width = $imgsize[0];
       $height = $imgsize[1];


      if ($width > $height) { // If the width is greater than the height it's a horizontal picture
        $xoord = ceil(($width - $height) / 2 );
        $width = $height;      // Then we read a square frame that  equals the width
      } else {
        $yoord = ceil(($height - $width) / 2);
        $height = $width;
      }
         $new_im = ImageCreatetruecolor($new_width,$new_height);
         $im = ImageCreateFromJPEG($source);
         imagecopyresampled($new_im,$im,0,0,$xoord,$yoord,$new_width,$new_height,$width,$height);
         ImageJPEG($new_im,$dest,90);

    }
}

Privacy Preference Center