Die meisten WordPress-Blogs zeigen in der Kategorien- bzw. Archiv-Ansicht für die enthaltenen Beiträge einen kleinen Text-Auszug an, im Theme wird das in der Regel mit dem Template-Tag the_excerpt(); erreicht.

the_excerpt(); gibt das aus, was man beim Schreiben des Beitrags im Feld “optionale Kurzfassung” eingetragen hat. Wenn’s keine Kurzfassung gibt, wird mit the_excerpt(); der Beitrags-Inhalt in automatisch gekürzter Form angezeigt. In beiden Fällen werden alle HTML-Tags “gestripped” - wodurch nicht nur sämtliche Formatierungen und Style-Anweisungen wegfallen, sondern natürlich auch die enthaltenen Bilder.

Dieses Verhalten dürfte normalerweise erwünscht sein, doch wenn man den “excerpt” nicht als bloße “Kürzung” (wie z.B. in der Auflistung von Suchergebnissen) einsetzen möchte, sondern als echten “Anreißer”-Text benutzen will, sind ein paar Wörter eventuell ein wenig mager.

Vor allem bei Beiträgen mit Bildern bietet es sich an, neben dem “Teaser”-Text auch gleich ein Vorschau-Bildchen zu zeigen.

Und das sollte in der täglichen Arbeit so einfach wie möglich zu bewerkstelligen sein - am besten gleich komplett “automatisch” - so dass man als Admin nicht groß z.B. irgendwelche Bild-Adressen in die “Benutzerdefinierten Felder” einzugeben braucht.

Im Auftrag von Webdesign-Haak war diese Funktion für die Seite einer Freiwilligen Feuerwehr umzusetzen - In der Auflistung “Einsatzberichte” sollte jeder Einsatz nicht nur mit Text, sondern auch mit einem Vorschau-Bild angezeigt werden.

 

Woher kommt das Thumbnail?

Auf der angesprochenen Feuerwehr-Seite wird der Xinha4WP-Editor (ein recht komfortables WYSIWYG-PlugIn) zum Schreiben von Beiträgen und zur Bildverwaltung benutzt.

Zusätzlich ist der “normale” Bilder-Upload von WordPress ist “auskommentiert”, daher kann davon ausgegangen werden, dass zu jedem verwendeten Bild auch ein Thumbnail vorliegt. Denn die Xinha-Bildverwaltung speichert mit jedem hochgeladenen Bild eine verkleinerte Version im selben Ordner ab und kennzeichnet diese durch einen Punkt vor dem Dateinamen. Die Vorschau zu “beispiel.jpg” heißt dann also “.beispiel.jpg”

Das folgende Code-Beispiel ist für das Zusammenspiel mit dem Xinha-Editor gedacht und kann nicht für jede WordPress-Installation direkt übernommen werden, da die unterschiedlichen Bildverwaltungen auch alle unterschiedlich reagieren. Siehe unten …

 

Ausgangs-Situation

Die WordPress-Loop in der “category.php”/”index.php” sieht (aufs Wesentliche reduziert) in etwa so aus:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="Posting">
	<h1><?php the_title(); ?></h1>
	<?php the_excerpt(); ?>
	<p><small><a href="<?php the_permalink(); ?>">... lesen Sie mehr!</a></small></p>
	</div>
<?php endwhile; else : ?>
	<div class="Posting">
	<h1>Inhalte in Vorbereitung</h1>
	<p>Es gibt noch keine Nachrichten in dieser Kategorie</p>
	</div>
<?php endif; ?>
	

Da im excerpt keinerlei HTML-Tags enthalten sind, können dort auch keine Bilder “hergeholt” werden, also muss man auf den Inhalt des kompletten Postings zugreifen.

Mit the_content(); gibt man den Beitrag direkt aus, was hier nicht erwünscht ist: Wir brauchen nämlich keine Ausgabe (echo), sondern bloß eine Rückgabe in PHP (return) - Dazu kann man z.B. die Anweisung get_the_content(); benutzen.

Übrigens - Bei WordPress funktioniert das mit ziemlich vielen Template-Tags: Einfach ein “get_” vor das bekannte Tag schreiben - und statt einer HTML-Ausgabe wird ein Wert (meistens ein String) zurückgegeben, den man nach Belieben weiterverwenden kann. Klappt natürlich nicht immer, aber recht oft.

 

Das erste Gerüst

Die Erweiterung sieht also so aus: Eine (noch zu entwickelnde) Funktion return_ThumbNail(); durchsucht eingegebene Zeichenketten auf Bilder und liefert den Wert “false”, sofern kein Bild vorkommt. Kommt mindestens ein Bild vor, wird der HTML-Code zum Thumbnail des ersten vorkommenden Bildes zurückgegeben.

In der WordPress-Loop wird return_ThumbNail(); mittels get_the_content(); mit dem ungekürzten Inhalt des jeweiligen Beitrages gefüttert. Gibt es dabei ein anderes Ergebnis als “false”, wird dieses Ergebnis (also der Code für das Thumbnail) innerhalb eines entsprechend benannten DIVs ausgegeben.

<!-- get_header(); und so weiter -->

<?php
function return_ThumbNail($Thumb) {
	return false; // Vorläufig nur "false" zurückgeben
}
?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="Posting">
	<h1><?php the_title(); ?></h1>
	<?php
		$ThumbNail = return_ThumbNail(get_the_content());
		if ($ThumbNail) {
			echo '<div class="Vorschau">'.$ThumbNail.'</div>';
		}
		the_excerpt();
	?>
	<p><small><a href="<?php the_permalink(); ?>">... lesen Sie mehr!</a></small></p>
	</div>
<?php endwhile; else : ?>
	<div class="Posting">
	<h1>Inhalte in Vorbereitung</h1>
	<p>Es gibt noch keine Nachrichten in dieser Kategorie</p>
	</div>
<?php endif; ?>

<!-- etc. (...) get_sidebar(); get_footer(); -->
	

 

Bildersuche

Im oben gezeigten Listing ist die Funktion return_ThumbNail(); noch nicht fertig, diese gibt jetzt ja noch dauernd “false” zurück. Das soll sie aber nur tun, wenn’s im Beitrag kein Bild gibt.

Zunächst ist also herauszufinden, ob in $Thumb überhaupt ein Bild enthalten ist. Dazu eignet sich die PHP-Funktion preg_match(); - Denn das Suchmuster kann mit einem regulären Ausdruck formuliert werden.

Und wenn man bei einem “Treffer” die Fundstelle in eine Variable ausgibt, kann man auch gleich den Code für das erste in $Thumb enthaltene Bild “isolieren”:

function return_ThumbNail($Thumb) {
	if (preg_match("/<img[^>]*>/",$Thumb,$Treffer)) {
		$Thumb = $Treffer[0];
		return $Thumb;
	} else {
		return false;
	}
}
	

Die preg_match();-Anweisung durchsucht $Thumb auf das erste Vorkommen einer Zeichenkette nach folgendem Muster:

<img plus (beliebige Anzahl beliebiger Zeichen außer >) bis >

Und bei einem Treffer wird $Treffer[0] mit der gefundenen Zeichenkette gefüllt.

 

Gestaltungs-Informationen löschen

Nach dieser Änderung meldet return_ThumbNail(); also entweder “false” oder den HTML-Code des ersten in $Thumb enthaltenen Image-Tags zurück. Allerdings sind in diesem Image-Tag weiterhin alle Höhen- und Breiten-Angaben sowie alle eventuellen inline Style-Anweisungen, CSS-IDs, CSS-Klassen etc. drin.

Für die Anzeige eines Thumbnails kann man aber insbesondere “width”- und “height”-Attribute nicht gebrauchen, denn das Thumbnail soll ja mit Sicherheit nicht genau so groß wie das Original-Bild dargestellt werden. Der nächste Schritt muss also sein, all diese Angaben herauszufiltern.

Das geht am besten mit preg_replace(); - hier ist die “regular expression” ein wenig komplexer.

Folgendes muss erhalten bleiben: Ein <img plus Leerzeichen am Anfang, ein /> am Ende - sowie die natürlich die Bild-Adresse, also eine Zeichenkette src=" bis einschließlich des nächsten darauf folgenden ".

function return_ThumbNail($Thumb) {
	if (preg_match("/<img[^>]*>/",$Thumb,$Treffer)) {
		$Thumb = preg_replace("/(<img ).*(src=\"[^\"]*\").*( \/>)/",'$1$2$3',$Treffer[0]);
		return $Thumb;
	} else {
		return false;
	}
}
	

Durch die runden Klammern können die drei eingeklammerten Bereiche innerhalb der preg_replace();-Anweisung als “Backreference” für $1, $3 und $3 benutzt werden.

Auf diese Weise wird $Treffer[0] auf eine Folge aus diesen drei eingeklammerten Suchmuster hin durchsucht, zwischen denen beliebige weitere Zeichen stehen können - um schließlich NUR durch die Inhalte dieser Muster ersetzt zu werden.

Alle unerwünschten “Infos” sind damit gelöscht, und $Thumb enthält nur noch ein “einfaches” Image-Tag ohne jegliche Gestaltungs-Angaben oder Hinweise auf die Anzeigegröße.

 

Link zum Thumbnail

Damit wäre man schon fast am Ziel. Im letzten Schritt muss noch die Bild-Adresse von $Thumb noch in den Link zum jeweiligen Thumbnail umgewandelt werden.

HINWEIS: Hier gehe ich von der ausschließlichen Vewendung der “Xinha4WP”-Bilderverwaltung aus - Das klappt also nicht unbedingt mit jedem WordPress-Blog.

Die Bilderverwaltung von “Xinha4WP” legt wie erwähnt Thumbnails im selben Ordner wie die dazugehörigen Originalbilder ab - und kennzeichnet diese durch einen Punkt vorm ursprünglichen Dateinamen. Das heißt: Der Inhalt von $Thumb sieht jetzt beispielsweise so aus …

<img src="http://www.seite.de/ordner/beispiel.jpg" />

… und muss umgewandelt werden in

<img src="http://www.seite.de/ordner/.beispiel.jpg" />

Auch für diesen Schritt eignet sich preg_replace(); - Man durchsucht die Variable $Thumb bis hin zum letzten /, das vor der abschließenden Zeichenfolge  /> auftaucht …

function return_ThumbNail($Thumb) {
	if (preg_match("/<img[^>]*>/",$Thumb,$Treffer)) {
		$Thumb = preg_replace("/(<img ).*(src=\"[^\"]*\").*( \/>)/",'$1$2$3',$Treffer[0]);
		$Thumb = preg_replace("/(.*\/)(.* \/>)/",'$1.$2',$Thumb);
		return $Thumb;
	} else {
		return false;
	}
}
	

… und macht dabei wieder Gebrauch von den Rück-Referenzierungen, so dass zwischen $1 und $2 ganz einfach der benötigte Punkt eingefügt werden kann.

 

Fertig:

Im Zusammenhang könnte die “category.php”/”index.php” dann in etwa folgendermaßen aussehen:

<!-- get_header(); und so weiter -->

<?php
function return_ThumbNail($Thumb) {
	if (preg_match("/<img[^>]*>/",$Thumb,$Treffer)) {
		$Thumb = preg_replace("/(<img ).*(src=\"[^\"]*\").*( \/>)/",'$1$2$3',$Treffer[0]);
		$Thumb = preg_replace("/(.*\/)(.* \/>)/",'$1.$2',$Thumb);
		return $Thumb;
	} else {
		return false;
	}
}

?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="Posting">
	<h1><?php the_title(); ?></h1>
	<?php
		$ThumbNail = return_ThumbNail(get_the_content());
		if ($ThumbNail) {
			echo '<div class="Vorschau">'.$ThumbNail.'</div>';
		}
		the_excerpt();
	?>
	<p><small><a href="<?php the_permalink(); ?>">... lesen Sie mehr!</a></small></p>
	</div>
<?php endwhile; else : ?>
	<div class="Posting">
	<h1>Inhalte in Vorbereitung</h1>
	<p>Es gibt noch keine Nachrichten in dieser Kategorie</p>
	</div>
<?php endif; ?>

<!-- etc. (...) get_sidebar(); get_footer(); -->
	

Ergebnis: Die Auszüge von Beiträgen ohne Bild werden wie gewohnt angezeigt, die von bebilderten Postings zusätzlich mit Thumbnail des ersten enthaltenen Bildes.

 

Einschränkungen und Hinweise

Dieses “System” ist als schnelle Lösung für die Weblogs gedacht, bei denen man davon ausgehen kann, dass zu jedem verwendeten Bild ein Thumbnail existiert - Und dass all diese Thumbnails auch auf die gleiche Weise benannt sind.

Je nachdem, wie bzw. womit man seine Bilder verwaltet, müssen natürlich einige Stellem im Code umgeändert werden.

Die WordPress Upload-Funktion schreibt bei Thumbnails zum Beispiel das Wort “.thumbnail” zwischen Dateinamen und Datei-Endung. Außerdem müssten noch die Fälle “abgefangen” werden, in denen es keine Mini-Vorschau gibt - da WordPress nur dann eine Verkleinerung zusammen mit dem hochgeladenen Bild abspeichert, wenn das Original-Bild eine bestimmte Größe überschreitet.

Update: Für Thumbnails, die mit dem dem Inline-Uploader von WordPress erzeugt wurden, funktioniert folgender Code:

function return_ThumbNail($Thumb) {
	if (preg_match("/<img[^>]*>/",$Thumb,$Treffer)) {
		$Thumb = preg_replace("/(<img ).*(src=\"[^\"]*\").*( \/>)/",'$1$2$3',$Treffer[0]);
		$Thumb = preg_replace("/(.[^.]* \/>)/",'.thumbnail$1',$Thumb);
		return $Thumb;
	} else {
		return false;
	}
}
	

Mit dem Iimage-Browser dürfte das System kaum noch zu verwenden sein, denn der Iimage-Browser erzeugt nur auf konkrete Anweisung für einzelne Bilder ein Thumbnail. Damit dürften für die wenigsten Bilder verkleinerte Versionen existieren.

Je nach Bedarf sollte man noch einige weitere Fehlermöglichkeiten bedenken:

Wenn Code-Beispiele veröffentlicht werden, kann’s unter Umständen passieren, dass die Suche nach dem ersten Bild ein Image-Tag innerhalb eines Listings findet und nach einem Thumbnail sucht, das aller Wahrscheinlichkeit nach gar nicht existiert.

Wer das ausschließen möchte, kann in der Funktion return_ThumbNail(); vor Aufruf von preg_match(); erst einmal alle Inhalte von <code>-Tags sowie vorsichtshalber auch alle Inhalte von <pre>-Tags löschen, so dass bei der Suche nach dem ersten Bild auch nur “sichtbare” Bilder berücksichtigt werden.

Zu Bildern, die in einem anderen Ordner als dem üblichen Bilder-Ordner (oder gar auf einer fremden Domain) gespeichert sind, gibt’s vermutlich ebenfalls eher selten ein Thumbnail.

 

Nachtrag:

Ein PlugIn für ThumbNails ist bereits in Arbeit - Die Beta-Version vom ThumbNail Creator erzeugt “eigene” ThumbNailsin einstellbarer Größe und legt sie in einem gesonderten Ordner ab.