Thumbnails sind automatisch erzeugte, meist verkleinerte Versionen, eines originalen Bildes. Thumnails können praktisch als Vorschaubilder genutzt werden, da die Dateigröße von Thumbnails kleiner ist als die Größe der Originaldatei. Ich möchte hier ein kleines Tutorial zur Thumnailerstellung bereitstellen, bzw ein Skript zum Download anbieten.

Thumbnail Tutorialvorraussetzungen

• PHP Kenntnisse
• GD Library

Das Thumnial Tutorial insgesamt hat einen mittleren Schwierigkeitsgrad.

Zuerst werde ich einfach das ganze Scipt zeigen, und dieses zerlegen wir langsam im Laufe des Tutorials.

 
function new_thumb(	$picturepath,
					$thumbpath = false,
					$newsize = 100) {
 
	/* Prüfen ob Datei existiert */
	if(!file_exists($picturepath)) {
		echo "Grafik nicht vorhanden";
		return false;
	}
 
	/* MIME-Typ auslesen */
	$size=getimagesize($picturepath);
	switch($size[2]) {
		case "1";
		$oldpic = imagecreatefromgif($picturepath);
		break;
 
		case "2";
		$oldpic = imagecreatefromjpeg($picturepath);
		break;
 
		case "3";
		$oldpic = imagecreatefrompng($picturepath);
		break;
 
		default;
		echo "Grafiktyp wird nicht unterstützt";
		return false;
	}
 
	/* Alte Maße auslesen */
	$width = $size[0];
	$height = $size[1]; 
 
	/* Neue Maße errechnen */
	if($width>=$height) {
		$newwidth = $newsize;
		$newheight = $newsize*$height/$width;
	}
	else {
		$newheight = $newsize;
		$newwidth = $newsize*$width/$height;
	}	
 
	/* Neues Bild erstellen mit den neuen Maßen */
	$newpic=imagecreatetruecolor($newwidth,$newheight);
 
	/* Jetzt wird das Bild nur noch verkleinerd */
	imagecopyresized($newpic,$oldpic,0,0,0,0,
				$newwidth,$newheight,$width,$height); 
 
	/* Und hier schon ausgegeben wenn es nicht gespeichert wird */
	if(!$thumbpath) {
		/* Grafik ausgeben */
		switch($size[2]) {
		case "1";	header ("Content-type: image/gif");
					return imagegif($newpic);
		break;
		case "2";	header ("Content-type: image/jpg");
					return imagejpeg($newpic);
		break;
		case "3";	header ("Content-type: image/png");
					return imagepng($newpic);
		break;
		}
	}
	/* Wenn es gespeichert werden soll */
	else {
		switch($size[2]) {
		case "1";	return imagegif($newpic, $thumbpath);
		break;
		case "2";	return imagejpeg($newpic, $thumbpath);
		break;
		case "3";	return imagepng($newpic, $thumbpath);
		break;
		}
	}
 
	//Bilderspeicher freigeben
    imagedestroy($oldpic);
    imagedestroy($newpic);
}

 
/* Jetzt geben wir ein Bild aus */
new_thumb("bild1.jpg", false, 500)
 

Das Bild bild1.jpg wird jetzt dynamisch erstellt (Thumbnail) und im Browser ausgegeben. Eine Besonderheit ist, das die maximale Seitenlänge in unserem Beispiel 500 Beträgt, entweder bei der Höhe oder bei der Breite (je nachdem was Größer ist). Wollen wir jetzt aber kein Thumbnail ausgeben sondern eines speichern, so müssen wir die Funktion einfach anders aufrufen.

 
/* Jetzt speichern wir ein Bild */
new_thumb("bild1.jpg", "bild1_thumb.jpg", 500)
 

Nun wird unser Bild1 als Thumbnail gespeichert, mit der gleichen maximalen Seitenlänge wie oben (500px).

Was passiert eigentlich in unserer Funktion?

Schauen wir uns also den ersten Teil der Funktion an, wir überprüfen ob die Grafik, aus welcher wir ein Thumbnail erstellen wollen vorhanden ist. Dies geschieht mit file_exists()

 
	/* Prüfen ob Datei existiert */
	if(!file_exists($picturepath)) {
		echo "Grafik nicht vorhanden";
		return false;
	}
 

Kommen wir zum nächsten Punkt, zum "Erstellen" eines Bildes aus der Originalgrafik (Originaldatei)

 
	/* MIME-Typ auslesen */
	$size=getimagesize($picturepath);
	switch($size[2]) {
		case "1";
		$oldpic = imagecreatefromgif($picturepath);
		break;
 
		case "2";
		$oldpic = imagecreatefromjpeg($picturepath);
		break;
 
		case "3";
		$oldpic = imagecreatefrompng($picturepath);
		break;
 
		default;
		echo "Grafiktyp wird nicht unterstützt";
		return false;
	}
 

Mittels getimagesize(pfad) lesen wir diverse Informationen einer Grafikdatei aus und speichern diese als Array in $size ($size[0] enthält die Breite, $size[1] enthält die Höhe, $size[2] enthält einen Integerwert welcher einem MIME-Typ zugewiesen wird).
Also erstellen wir entweder eine gif, jpeg oder png Grafik (Thumbnails von anderen Grafiken zu erstellen ist mit diesem Script leider nicht möglich!). Im nächsten Teil der Funktion (Tutorials) lesen wir die Breite und Höhe des Originalbildes aus und berechnen gleich die Maße unseres Thumbnails

 
	/* Alte Maße auslesen */
	$width = $size[0];
	$height = $size[1]; 
 
	/* Neue Maße errechnen */
	if($width>=$height) {
		$newwidth = $newsize;
		$newheight = $newsize*$height/$width;
	}
	else {
		$newheight = $newsize;
		$newwidth = $newsize*$width/$height;
	}
 

Wie Oben schon beschrieben holen wir uns aus dem Array $size die Breite und die Höhe, danach prüfen wir ob unser Bild ein Bild im Querformat (Breite>Höhe) oder Hochformat (Höhe>Breite) ist. Dies geschieht mit einer einfachen If-Abfrage.
Beispiel: Nehmen wir an unsere Ausgangsgrafik hat die Maße 1000px Breite und 500px Höhe (Querformat denn die Breite > Höhe). Wollen wir jetzt eine maximale Seitenlänge von 200px haben, so wird jetzt der Variable $newwidth der Wert 200 zugewiesen. Die Variable $newheight wird berechnet (200*500/1000) und wir bekommen eine neue Höhe von 100px für das Thumbnail heraus. Somit bleiben die Seitenverhältnisse des Bildes auch im Thumnail erhalten und es wird nicht verzerrt.

Kommen wir nun zum nächsten Teil der Funktion (des Tutorials)

 
	/* Neues Bild erstellen mit den neuen Maßen */
	$newpic=imagecreatetruecolor($newwidth,$newheight);
 
	/* Jetzt wird das Bild nur noch verkleinerd */
	imagecopyresized($newpic,$oldpic,0,0,0,0,
				$newwidth,$newheight,$width,$height);
 

Als erstes wird mit imagecreatetruecolor() ein neues leeres Bild erstellt, und in dieses werden dann die Farbwerte vom der Originalgrafik mittels imagecopyresized() eingefügt. Nun nähern wir uns schon dem Ende des Tutorials an, nämlich der Ausgabe bzw Speicherung unseres Thumbnails.

 
	/* Und hier schon ausgegeben wenn es nicht gespeichert wird */
	if(!$thumbpath) {
		/* Grafik ausgeben */
		switch($size[2]) {
		case "1";	header ("Content-type: image/gif");
					return imagegif($newpic);
		break;
		case "2";	header ("Content-type: image/jpg");
					return imagejpeg($newpic);
		break;
		case "3";	header ("Content-type: image/png");
					return imagepng($newpic);
		break;
		}
	}
 

Wenn das Thumbnail nicht gespeichert sondern ausgegeben werden soll, muss beim Aufrufen unserer selbstgeschriebenen Funktion new_thumb() als Speicherort ($thumbpath) false (= der Standartwert) angegeben sein. Mit der Switch prüfen wir wieder den MIME-Typ und geben die Datei aus. Wollen wir das Thumbnail allerdings nicht ausgeben sondern speichern, muss die Variable $thumbpath gesetzt sein. Dann läuft das Script weiter und wir kommen zum Ende der Funktion:

 
	/* Wenn es gespeichert werden soll */
	else {
		switch($size[2]) {
		case "1";	return imagegif($newpic, $thumbpath);
		break;
		case "2";	return imagejpeg($newpic, $thumbpath);
		break;
		case "3";	return imagepng($newpic, $thumbpath);
		break;
		}
	}
 

Wieder mittels Switch-Abfrage den MIME-Typ abfragen und dann wird das Bild mittels imagejpeg, imagegif oder imagepng gespeichert, da ein Speicherort ($thumbpath) angegeben wurde. Zum abschluss leeren wir nur noch den Speicher:

 
//Bilderspeicher freigeben
    imagedestroy($oldpic);
    imagedestroy($newpic);
 

Ich hoffe ich konnte mit diesem Tutorial einigen Leuten helfen ihre eignenen Thumnails zu erstllen und wäre für Rückmeldungen (mittels der Kommentarfunktion) dankbar.