Thumbnails....

[spikypunker]

Hi guys, i wondered if anyone knows how i can standardise the way images are handeled on my social network site? I've built a very basic music showcase service, and people are encouraged to upload images to be associated with thier profile and also thier music tracks.

 

Currently people are uploading images of all different shapes and to cohere with the grid display, these are squished into squares. On the profile or the track page they display well, but it's when i need them to be square, they look terrible. I really dont want to go away from the grid idea because this goes through the whole site, so is there a way of either, installing a facebook-esque bit of javascript that forces the user to choose a square portion of the image as they upload it, OR when i want the images in a grid, only display a portion of the image?

 

Any help or links to help would be frikin awesome cheers dudes

 

Chris @maddog

[Yesideez]

You can go the JAvascript route and force a square area of selection or you can carry on what you're doing.

 

You can get good scripts out there to resize an image down to a thumbnail while preserving the constraint of an image.

 

Say you upload a 600x300 image and your maximum thumbnail size is 100x100 - it'll resize the height down to 100 and the width considerably smaller to look normal but still fit inside the bounds.

[spikypunker]

Thats wkd man cheers, dont suppose anyone has done this before and can give me some specific tips?

 

Kind regards, Chris

[phil88]

In the past I've written something that'll create thumbnails that are in proportion to the original image.

 

This is the function I used, feel free to take it and modify it to fit your site. For my site, the parameters where, $id- Every image had a unique ID, the $url to the image and $selectedWidth was the maximum width that the image could be - this function doesn't care much for limiting the image's height.

<?PHP
function createLinkableThumbnail($id,$url,$selectedWidth){
	$imageinfo = getimagesize($url);
	if(($imageinfo['mime'] == "image/jpeg") || ($imageinfo['mime'] == "image/pjpeg")){
		$image = @imagecreatefromjpeg($url);
	}elseif($imageinfo['mime'] == "image/png"){
		$image = @imagecreatefrompng($url);
	}else{
		$image = @imagecreatefromgif($url);
	}
	$width = imagesx($image);
	$height = imagesy($image);


	$new_width = $selectedWidth; // Width can't be more than the width that has been given
	$factor = $width / $new_width; // Calc. the resize factor
	$new_height = $height / $factor; // Apply that factor to the image's height
	$image_resized = imagecreatetruecolor($new_width, $new_height); // Create blank canvas of the new dimensions
	imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height); // Resize the image and put it on the blank canvas
	imagepng($image_resized,'images/thumbs/ext'.$id.'.png'); // Create the png file
}
?>

 

Hope this helps!

[spikypunker]

Ah cool thats wkd i'll try it, just one thing, does it crop the image to the new size, or squash it?

 

Peace

[phil88]

squashes

[spikypunker]

ah ok cool, thats the problem tho really, currently the images are squashed and it's starting to look really messyu having all these squashed images on a page! I need a way to crop the image, either when you upload oir when it's displayed!

 

cheers

[redarrow]

 

crop integrate it.

<?php
function crop_n_scale($src_img, $dimx, $dimy)
{
// functional scaling
$srcH = imagesy($src_img);
$srcW = imagesx($src_img);
$ratio = $dimy/$srcH;
$new_W = $srcW*$ratio;

if ($new_W<$dimx)
	$ratio = $dimx/$srcW;

//$img = scale_image($src_img, $srcW*$ratio, $srcH*$ratio);
$img=imagecreatetruecolor($srcW*$ratio,$srcH*$ratio);
imagecopyresampled($img,$src_img,0,0,0,0,$srcW*$ratio,$srcH*$ratio,$srcW,$srcH);

// crop (if necessary)
$img = crop_image($img, $dimx, $dimy);
return $img;
}
?>