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