UDT to easily insert resized clickable images (floated) with caption into pages.
Posted: Tue Jan 12, 2010 3:54 am
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, and add captions.. There's no way the average client will be able to do that consistently.
I created a UDT that will do all this. Example: http://www.thefcff.com/news/6/61/Rumble ... oseland-48
Usage of the UDT (how it appears in tinyMCE):
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/news/2010/glena.jpg. I set my relative path root to be /uploads/images/news
Here's the UDT (named image)
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:
news_image_left, news_image_right, news_image_title, and news_image_c2e (c2e="click to enlarge")
Here's how I set the styles:
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!
Wayne
I created a UDT that will do all this. Example: http://www.thefcff.com/news/6/61/Rumble ... oseland-48
Usage of the UDT (how it appears in tinyMCE):
Code: Select all
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.
{image file="2010/glena.jpg" title="Glena Avila" 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.
Here's the UDT (named image)
Code: Select all
// Settings
$small_size = 200;
$large_size = 640;
$path = 'uploads/images/news';
// 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=\"news_image_$side\">\n");
echo("<a href=\"$image\" title=\"$title\" rel=\"lightbox[news]\">\n");
echo("<img src=\"$small_image\" alt=\"$title\" title=\"$title\" /><br />\n");
echo("</a>\n");
if ($title) {
echo("<span class=\"news_image_title\">$title</span><br />\n");
}
echo("<span class=\"news_image_c2e\">(click to enlarge)</span>\n");
echo("</div>\n");
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:
news_image_left, news_image_right, news_image_title, and news_image_c2e (c2e="click to enlarge")
Here's how I set the styles:
Code: Select all
.news_image_left, .news_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;
}
.news_image_left {
float: left;
margin-right: 10px;
}
.news_image_right {
float: right;
margin-left: 10px;
}
.news_image_title, .news_image_c2e {
font-size: 11px;
}
.news_image_title {
font-style: italic;
}
Wayne