Archief - Nette thumbnails

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

Huey

Legacy Member
Hi;

Ik ben momenteel bezig m et het ontwikkelen van een social networking site maar heb wat problemen met het genereren van thumbnails.
Mijn systeem resized de thumbnails gewoon waardoor alle foto's een andere vorm krijgen wat voor een ietwat chaotisch beeld zorgt.

Ik zou graag een nette lijst krijgen met thumbnails van allemaal dezelfde grootte en een goede kwaliteit; zoals op netlog dus.
Daar wordt de foto verkleind en een deel van de image wordt gecropped, het midden meestal.

Iemand een idee of er online een script te vinden is of een trukje waarmee ik dit kan verwezenlijken?

j design

Legacy Member
Bekijk dit eens
http://www.jdesign.be/sitedeals/9lives/newImagefunctions.rar

Een super eenvoudig resize script met thumb + normale img
Ben vergeten waar ik het gehaald heb.

In de config kun je de height aanpasse, de dimenties worden bewaard.
De index is het uploadform
ImageFunctions is het effectieve uitvoerscript, moet niets aan veranderd worden.

Normaal kun je ook met % werken maar weet niet goed meer hoe..
// t zit hem hier $image->resizeToHeight($config_height_big);
ToWidth, scale enzo

Huey

Legacy Member
Ik heb een script nodig waarmee ik ook de width kan aanpassen, het moet echt a la netlog worden.

www.thewebhype.com/thumbs.jpg

bovenste rij: kan je zien hoe het NIET moet, dat is wat ik nu heb
de onderste rij is hoe het WEL moet..

Iemand een idee?

dJeez

Legacy Member
Ja, in het onderste knip je gewoon onder en boven of links en rechts stukken weg. Je neemt de kortste lengte van de afbeelding als referentie. Stel dat je thumbnail 100x100 moet zijn en je hebt een afbeelding van 320x200, dan is 200 dus de referentielengte. Je knipt dus als het ware 60 pixels links en rechts weg, zodat je een afbeelding van 200x200 hebt, die bestaat uit het centrale deel van de afbeelding. Die schaal je dan naar 100x100. Op basis van die beschrijving zou het toch moeten lukken de code uit te werken, zelf uitwerken is beter om het te blijven onthouden :p.

Nog beter zou zijn dat je de gebruiker zelf het deel van de afbeelding laat selecteren dat in de thumbnail moet verschijnen. Als ik mij niet vergis zit er een voorbeeldje van een front-end die dat kan bij The Yahoo! User Interface Library (YUI).

KoenDK

Legacy Member
Huey zei:
Ik heb een script nodig waarmee ik ook de width kan aanpassen, het moet echt a la netlog worden.

www.thewebhype.com/thumbs.jpg

bovenste rij: kan je zien hoe het NIET moet, dat is wat ik nu heb
de onderste rij is hoe het WEL moet..

Iemand een idee?

no offence, maar vergeet maar dat je iets kan opzetten als netlog hoor :D
je moet hier niet op reageren, want ik weet niet waarom je dit allemaal vraagt :niceone:

tha_rippa1be

Legacy Member
KoenDK zei:
no offence, maar vergeet maar dat je iets kan opzetten als netlog hoor :D
je moet hier niet op reageren, want ik weet niet waarom je dit allemaal vraagt :niceone:

Hij bedoelt dat de resizing moet gebeuren zoals het bij netlog gebeurt..

Kzal straks is zien hoe ik dat bij mijn site heb gedaan, kzit tussen 2 presentaties in atm :p
(ik weet nog wel dat het gewoon herberekenen van de dimensies was van de foto wss met GD)

Huey

Legacy Member
KoenDK zei:
no offence, maar vergeet maar dat je iets kan opzetten als netlog hoor :D
je moet hier niet op reageren, want ik weet niet waarom je dit allemaal vraagt :niceone:

Dus omdat ik om thumbnails vraag zoals diegenen waar netlog gebruik van maakt ga ik een 2de netlog op poten zetten?
Dit is waarschijnlijk 1 van de domste opmerkingen die ik ooit op dit forum heb gelezen, maar gezien je zegt dat ik er niet op moet reageren heb je dat blijkbaar al zelf in de gaten.:niceone:

Huey

Legacy Member
tha_rippa1be zei:
Hij bedoelt dat de resizing moet gebeuren zoals het bij netlog gebeurt..

Kzal straks is zien hoe ik dat bij mijn site heb gedaan, kzit tussen 2 presentaties in atm :p
(ik weet nog wel dat het gewoon herberekenen van de dimensies was van de foto wss met GD)

Thanks!

j design

Legacy Member
Het is mss niet echt een elegant idee maar:

Als je nu idd op de kortste lengte gaat resizen en ze dan als achtergrond in een divje gaat zetten van 100x100 en dan de achtergrond centered.
De rest van de afbeelding zie je dan niet.

Je kan ze mss zelf als een afbeelding in de div zetten en de div de overflow hidden eig meegeven.

Het is maar een idee natuurlijk

tha_rippa1be

Legacy Member
Huey zei:

Ah darn, khad blijkbaar wat te rap gereageerd, hetgeen ik gemaakt had was dus hetgeen dat ge nu al had, enkel aangepast aan 1 van de zijden.

Maar hetgeen dJeez zegt is hoe ik het ook zou doen mocht ik op beide zijden willen resizen.

dJeez

Legacy Member
Als je er echt niet in slaagt het voor elkaar te krijgen (ik verwacht dan wel dat je een codefragment post met hoe ver je geraakt bent) wil ik wel een werkende oplossing posten die ik ooit eens heb geschreven (ik moet ze wel eerst eens opzoeken eigenlijk -> een werkende versie ervan kan je checken op Vande Moortel - dateert al van 2003 en is fubar HTML en CSS als ik het zo eens bekijk :p).

Ik weet wel niet exact meer of ik gebruik maakte van gd of ImageMagick voor het genereren van de thumbnails, maar ik denk dat het die laatste is.

Huey

Legacy Member
Dat is dus inderdaad exact waar ik naar opzoek ben!
Ik zal het eerst zelf proberen!

tha_rippa1be

Legacy Member
Heh, kwas geinterreseerd in het zelf te maken en kheb het juist af :p
Ma kzal dan ook effe wachten met posten :)

Huey

Legacy Member
Ben niet verder geraakt dan dit..
Achja, still learning he

PHP:
function imageresize($filename, $newwidth) {
    
    list($width,$height)=getimagesize($filename);
    
    if ($width <= $newwidth) {
        // Niks doen
    } else {
        
        $src = imagecreatefromjpeg($filename);
        
        $newheight=($height/$width)*$newwidth;
        $tmp=imagecreatetruecolor($newwidth,$newheight);
        
        imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
        
        imagejpeg($tmp,$filename,100);
        
        imagedestroy($src);
        imagedestroy($tmp);
    }
}

tha_rippa1be

Legacy Member
Huey zei:
Ben niet verder geraakt dan dit..
Achja, still learning he

PHP:
function imageresize($filename, $newwidth) {
    
    list($width,$height)=getimagesize($filename);
    
    if ($width <= $newwidth) {
        // Niks doen
    } else {
        
        $src = imagecreatefromjpeg($filename);
        
        $newheight=($height/$width)*$newwidth;
        $tmp=imagecreatetruecolor($newwidth,$newheight);
        
        imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
        
        imagejpeg($tmp,$filename,100);
        
        imagedestroy($src);
        imagedestroy($tmp);
    }
}

Ik zie dat ge enkel de (nieuwe) width meegeeft als parameter. Ge gaat width en height nodig hebben als ge de output afbeelding een vaste grootte wilt geven he.
(anders zijt ge gewoon aan het schalen adhv de width, en dan gaat ge verschillende hoogtes krijgen)

Huey

Legacy Member
Ik heb echt geen idee wat ik moet doen man :D
Bestaat hier echt geen ander gratis script voor ofzo?

tha_rippa1be

Legacy Member
Huey zei:
Ik heb echt geen idee wat ik moet doen man :D
Bestaat hier echt geen ander gratis script voor ofzo?
Dit ist geen dat ik ineen had geflanst:
Kan hoogst waarschijnlijk veel aan verbeterd worden, maar het werkt.
(een afbeelding inlezen van BMP werkt bvb niet, opslaan als BMP dan weer wel.)
PHP:
class Image{
		public function Image($pathToImage){
			$this->pathToImage = $pathToImage;
			list($this->width, $this->height) = getimagesize($pathToImage);
			
			//find the input filetype
			$this->filetype = pathinfo($pathToImage);
			$this->filetype = $this->filetype['extension'];
			
			$this->setOutputQuality(100);
			$this->image = $this->createImage();
		}
		
		public function setOutputQuality($quality){
			//0 <= quality  <= 100
			if($this->filetype == 'jpg' || $this->filetype == 'jpeg'){
				//its jpeg (quality means: ranges from 0 (worst quality, smaller file) to 100 (best quality, biggest file). The default is the default IJG quality value (about 75).)
				$this->outputQuality = $quality;
			}else{
				//its png (quality means: Compression level: from 0 (no compression) to 9.)
				$this->outputQuality = (10-$quality/10 <= 9)?10-$quality/10: 9;
			}
		}
		
		private function createImage(){
			switch($this->filetype){
				case 'png':
					return imagecreatefrompng($this->pathToImage);
				break;
				case 'jpg':
					return imagecreatefromjpeg($this->pathToImage);
				break;
				case 'jpeg':
					return imagecreatefromjpeg($this->pathToImage);
				break;
				case 'gif':
					return imagecreatefromgif($this->pathToImage);
				break;
				case 'bmp': //errort
					return imagecreatefromwbmp($this->pathToImage);
				break;
			}
		}
		
		private function saveImage($image, $location){
			$filetype = pathinfo($location);
			$filetype = $filetype['extension'];
			
			switch($filetype){
				case 'png':
					imagepng($image, $location, $this->outputQuality);
				break;
				case 'jpg':
					imagejpeg($image, $location, $this->outputQuality);
				break;
				case 'jpeg':
					imagejpeg($image, $location, $this->outputQuality);
				break;
				case 'gif':
					imagegif($image, $location);
				break;
				case 'bmp':
					imagewbmp($image, $location);
				break;
			}
		}
		
		public function saveResizedBySizeCrop($pathToNewImage, $newWidth, $newHeight){
			$calculatedWidth = $newWidth;
			$calculatedHeight = $newHeight;
			$xOffset = 0;
			$yOffset = 0;
			if($this->width/$newWidth < $this->height/$newHeight){
				$calculatedHeight = $this->height/($this->width/$newWidth);
				$yOffset = ($calculatedHeight-$newHeight)/2;
			}elseif($this->width/$newWidth > $this->height/$newHeight){
				$calculatedWidth = $this->width/$this->height*$newHeight;
				$xOffset = ($calculatedWidth-$newWidth)/2;
			}//else the ratio is correct, keep the newWidth and newHeight and 0 offset
			
			$resizedImage = imagecreatetruecolor($newWidth, $newHeight);
			imagecopyresampled($resizedImage, $this->image, 0-$xOffset, 0-$yOffset, 0, 0, $calculatedWidth, $calculatedHeight, $this->width, $this->height);
			
			$this->saveImage($resizedImage, $pathToNewImage);
			imagedestroy($resizedImage);
		}
		
		public function saveResizedByWidth($pathToNewImage, $newWidth){
			$this->saveResizedBySizeCrop($pathToNewImage, $newWidth, $this->height/$this->width*$newWidth);
		}
		
		public function saveResizedByHeight($pathToNewImage, $newHeight){
			$this->saveResizedBySizeCrop($pathToNewImage, $this->width/$this->height*$newHeight, $newHeight);
		}
	}
gebruik:
PHP:
$imjpg = new Image("in/in.jpg");
$imjpg->saveResizedByWidth("out.jpg", 300);

$imjpeg= new Image("in/in.jpeg");
$imjpeg->saveResizedByWidth("out.jpeg", 300);

$imgif = new Image("in/in.gif");
$imgif->saveResizedByWidth("out.gif", 300);

$impng = new Image("in/in.png");
$impng->saveResizedByWidth("out.png", 300);

$impng = new Image("in/in.png");
$impng->setOutputQuality(50); //van 0-100 (hoger is beter)
$impng->saveResizedBySize("smalltobig.png", 1000, 500)

dJeez

Legacy Member
Hier is +/- wat ik gebruikte op Vande Moortel :
PHP:
function generate_thumbnail($source, $dest, $target_size)
{
    if (!file_exists($source))
    {
        throw new Exception("Couldn't locate file '$source'.");
    }
    $info = getimagesize($source);

    $newwidth = $info[0];
    $newheight = $info[1];

    // resize
    if ($newwidth < $newheight)
    {
        $xstart = 0;
        $ystart = round(($newheight-$newwidth)/2);
        $xstop = $newwidth;
        $ystop = $newwidth;
    }
    else if ($newwidth > $newheight)
    {
        $xstart = round(($newwidth-$newheight)/2);
        $ystart = 0;
        $xstop = $newheight;
        $ystop = $newheight;
    }
    else
    {
        $xstart = 0;
        $ystart = 0;
        $xstop = $newwidth;
        $ystop = $newheight;
    }

    switch($info[2])
    {
        case IMG_GIF:
            $original = imagecreatefromgif($source);
            if (!$original)
            {
                throw new Exception("Couldn't open GIF '$source'.");
            }
            $thumbnail = imagecreate($target_size, $target_size);
            imagecopyresampled($thumbnail, $original, 0, 0, $xstart, $ystart, $target_size, $target_size, $xstop, $ystop);
            imagegif($thumbnail, $dest);
            break;
        case IMG_JPG:
        case IMG_JPEG:
            $original = imagecreatefromjpeg($source);
            if (!$original)
            {
                throw new Exception("Couldn't open jpeg '$source'.");
            }
            $thumbnail = imagecreatetruecolor($target_size, $target_size);
            imagecopyresampled($thumbnail, $original, 0, 0, $xstart, $ystart, $target_size, $target_size, $xstop, $ystop);
            imagejpeg($thumbnail, $dest);
            break;
        case IMG_PNG:
            $original = imagecreatefrompng($source);
            if (!$original)
            {
                throw new Exception("Couldn't open PNG '$source'.");
            }
            $thumbnail = imagecreatetruecolor($target_size, $target_size);
            imagecopyresampled($thumbnail, $original, 0, 0, $xstart, $ystart, $target_size, $target_size, $xstop, $ystop);
            imagepng($thumbnail, $dest);
            break;
    }

    return TRUE;
}

De parameters zijn respectievelijk de bestandsnaam van het originele bestand, die van de thumbnail en de dimensie van de thumbnail (in dit geval een vierkant, dus ook maar 1 parameter :p).

Misschien kan je best ook een chmod doen van de afbeelding na het wegschrijven zodat die via FTP verwijderbaar is (0644 should do the trick).
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan