Easily insert resized clickable images (floated) with caption into pages

All my clients seem to hate to resize images and create smaller versions to display and larger versions to view when clicked. Not to mention placing them in tinyMCE, and selecting the right style to float it left or right and set the margins.. Now they want to make it clickable, integrate it with LightBox and add captions.. There's no way the average client will be able to do that consistently.

I have created a User Defined Tag that will do all this. Here's a live example.

Below is the usage of this UDT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis sollicitudin leo, ut vehicula ante laoreet sit amet. Sed luctus nisi eget dolor ornare eget semper nisl rhoncus.

{clickable_image file="image.jpg" title="Photo by Lisa Bartholomew" side="left"}

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Pretty self explanatory. The path to the file is relative to where ever you set it in the UDT. The user uploads the file (full-size, right off the camera if they like), to the the directory.. In my case it's /uploads/images/image.jpg. I set my relative path root to be /uploads/images.

Here's the UDT (named clickable_image)

// Settings

$small_size = 200;
$large_size = 640;
$path = 'uploads/images';

// Get Params

$image = $path . '/' . $params['file'];
$title = $params['title'];
$side= $params['side'];

// Get Name of small file (*_sm.jpg)

preg_match('/^(.*)(\..*)$/', $image, $matches);
$small_image = $matches[1] . '_sm.jpg';

// If the small file already exists, we're done with the heavy processing.

if (!file_exists($small_image)) {
  list($width, $height) = getimagesize($image);

// Get new sizes

  $img = imagecreatefromjpeg($image);
  $imgratio=$width/$height;
  if ($imgratio > 1) {
    $large_width = $large_size;
    $large_height = $large_size / $imgratio;
    $small_width = $small_size;
    $small_height = $small_size / $imgratio;
  } else {
    $large_height = $large_size;
    $large_width = $large_size * $imgratio;
    $small_height = $small_size;
    $small_width = $small_size * $imgratio;
  }

// Generate small image

  $resized_img = imagecreatetruecolor($small_width, $small_height);
  imagecopyresampled($resized_img, $img, 0, 0, 0, 0, $small_width, $small_height, $width, $height);
  imagejpeg($resized_img, $small_image);

// If large image is larger than $large_size, resize that as well
 
  if ($width > $large_size || $height > $large_size) {
    $resized_img = imagecreatetruecolor($large_width, $large_height);
    imagecopyresampled($resized_img, $img, 0, 0, 0, 0, $large_width, $large_height, $width, $height);
    imagejpeg($resized_img, $image);
  }
}

// echo the html

echo("<div class=\"clickable_image_$side\">\n");
echo("<a href=\"$image\" title=\"$title\" rel=\"lightbox\">\n");
echo("<img src=\"$small_image\" alt=\"$title\" title=\"$title\" /><br />\n");
echo("</a>\n");
if ($title) {
  echo("<span class=\"clickable_image_title\">$title</span><br />\n");
}
echo("<span class=\"clickable_image_c2e\">(click to enlarge)</span>\n");
echo("</div>\n");

This UDT also integrates the image with lightbox when clicked, if you have it loaded. If not, when clicked, it will display the image alone.. You can change it to do whatever you like.
In a nutshell, the code sets the desired small and large maximum dimensions, and the relative path, then checks for the existence of the small file. If not, it resizes the large file to the small file, then resizes the large file to the max dimensions if it exceeds it

If the small file already exists, it doesn't do any real processing, and just displays the file, in a div (you set the float in CSS), with a caption.

There are four CSS classes that this uses:

clickable_image_left, clickable_image_right, clickable_image_title, and clickable_image_c2e (c2e="click to enlarge")

Here's how I set the styles:

.clickable_image_left, .clickable_image_right {
  margin-bottom: 10px;
  text-align: center;

/* I didn't like that the image was a bit higher than the text,
    so I moved it down 3px. */

  position: relative;
  top: 3px;
}

.clickable_image_left {
  float: left;
  margin-right: 10px;
}

.clickable_image_right {
  float: right;
  margin-left: 10px;
}

.clickable_image_title, .clickable_image_c2e {
  font-size: 11px;
}

.clickable_image_title {
  font-style: italic;
}

That's it! There isn't any error checking, and it only works with jpg.. I tried to keep it lightweight.. I hope you like it!

Originally posted on the CMSMS Forums

Comments