geschrieben von Micha am 17. Dezember 2009 | 31 Kommentare
Wie ich schon in dem Beitrag the_post_image ist jetzt the_post_thumbnail erklärt habe, hat sich mit der Post Thumbnail Funktion einiges geändert. Ich habe gestern Abend ein bischen mit Sergej Müller geskyped und herumprobiert. Folgendes ist dabei herausgekommen:
Man kann die Funktion mit 4 Bildformaten füttern:
// das Vorschaubild
the_post_thumbnail('thumbnail');
// mittlere Auflösung
the_post_thumbnail('medium');
// große Auflösung
the_post_thumbnail('large');
// das Original
the_post_thumbnail();Die Ausrichtung des Bildes kann auch beeinflusst werden. Ebenfalls ist es möglich, eigene Klassen mit anzugeben:
// Ausrichtung links
the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
// Ausrichtung rechts
the_post_thumbnail('thumbnail', array('class' => 'alignright'));
// Ausrichtung zentriert
the_post_thumbnail('thumbnail', array('class' => 'aligncenter'));
// Ausrichtung rechts und eigene Klasse my_own_class
the_post_thumbnail('thumbnail', array('class' => 'alignright my_own_class'));Die 3. Variante ist die Steuerung der Größe des Bildes mit einem Array aus Breite und Höhe:
Dazu nehmen wir einmal an, eure Bildeistellungen für Thumbnail sind 150×150, für medium 300×200 und für Large 600×400.
// skaliert das Thumnail auf 60x60 Pixel
the_post_thumbnail(array(60,60), array('class' => 'alignleft'));
// original Thumbnail
the_post_thumbnail(array(150,150), array('class' => 'alignleft'));
// skaliert das medium Bild auf 200x133 Pixel
the_post_thumbnail(array(200,200), array('class' => 'alignleft'));
// skaliert das Large auf 400x266 Pixel
the_post_thumbnail(array(400,345), array('class' => 'alignleft'));Man sieht, das die Bildproportionen immer beibehalten werden, auch wenn man krumme Werte angibt.
Für die Themedesigner ist es dadurch aber nicht unbedingt einfacher geworden, da keiner weiß, was der Nutzer für Einstellungen in seiner Mediathek vorgenommen hat. Eine Möglichkeit, der Sache näher zu kommen, ist die Abfrage der Optionen für die einzelnen Größen:
// Breite des Thumbnails
get_option('thumbnail_size_w');
// Höhe des Thumbnails
get_option('thumbnail_size_h');
// Höhe der mittleren Auflösung
get_option('medium_size_h');
// Breite der großen Auflösung
get_option('large_size_w');
// 1 = Crop an, 0 = Crop aus
get_option('thumbnail_crop')Diese Werte kann man dann im Theme verändern.
$w = get_option('thumbnail_size_w') / 2;
$h = get_option('thumbnail_size_h') /2;
the_post_thumbnail(array($w, $h), array('class' => 'alignleft'));Hier ein anderes Beispiel: Wenn die Maße für das Thumnail größer sind wie 100×100 und Crop eingeschaltet ist, dann soll das Thumnail auf 100×100 verkleinert werden, ansonsten nehmen wir das original Thumbnail.
if(get_option('thumbnail_size_w') > 100 && get_option('thumbnail_crop') == 1) {
the_post_thumbnail(array(100,100));
}else{
the_post_thumbnail('thumbnail');
}Viel Spass mit den Post Thumbnails! Beachtet aber auch, das jedes Post Thumbnail 2 Datenbankabfragen kostst. Auf einer Seite mit 10 Posts sind das zusätzlich 20 Queries.
Super! Danke für die Mühe!
Danke, wirklich sehr informativ und ausgiebig an das Thema rangegangen!
Hat mir geholfen …
Vielen Dank für die ausführliche Beschreibung.
Ich bin jedoch auf ein Problem gestoßen. Würde gerne mein neustes Projekt auf dieser Basis aufbauen, da Scissors ja nicht mehr unterstüzt wird. Kann ich irgendwo definieren, dass wenn ein Miniaturbild via Editor gecroppt wird, ein festgelegtes Seitenverhältnis eingehalten werden soll?
Alternativ könnte ich mir auch vorstellen, dass wenn man im ersten Parameter schon die Größen angeben kann, dass man z.B durch einen dritten Wert im Array das croppen beeinflussen könnte ala:
the_post_thumbnail(array(240,135,TRUE));Jemand eine Idee, wie ich WordPress dazu bekomme passend zu croppen, statt zu skalieren?
Mathias, ich denke nicht, daß das croppen im Image Editor irgendetwas mit der ausgabe zu tun aht. Wenn du ein Bild auf 240×135 croppst und speicherst, wird es mit array(240, 135) auch korrekt ausgeben. Ich habe es nicht überprüft, würde mich aber wundern, wenn es nicht so wär.
Hallo Micha,
dem ist leider nicht so. Das Bild wird in meinen Versuchen leider immer nur so skaliert, dass es in den Rahmen von 240 x 135 passt, sprich das Bild ist dann meinetwegen 240px breit aber die höhe variiert entsprechend.
Ich mein irgendwo muss man da doch eingreifen können.
Ich dachte ja auch erst in der media.php fündig geworden zu sein… ~ Zeile 180
function add_image_size( $name, $width = 0, $height = 0, $crop = FALSE ) {…problem ist nur, dass ich noch nicht ganz im allgemeinen durch die Plugin API, Hooks und Filter durchblicke.
Vielen Dank erst mal für die Beschreibung.
ich habs hingekriegt, dass ich Thumbnails in meinem Kategorienarchiv hinzufügen kann, jedoch erscheinen diese immer ganz unten beim jeweiligen Artilel und ich hätte sie gerne links neben dem Text.
Ich verwende das Buuddymatic-Theme und mein Problem ist glaube ich, dass ich nicht weiss wo in der archiv.php ich genau the_post_thumbnail(‘thumbnail’, array… eintragen muss.
Ich bin noch blutiger WordPressanfänger und finde bei den Buddymatic-Theme-php Dateien nicht die wo der klassische, hier oft genannte Loop drin ist , bzw. weiss ich nicht an welcher Stelle genau der the_post_thumbnail-code rein muss damit das Bild links vom Text erscheint.
In der Thumbnail hinzufügen Maske habe ich links vom Text angegeben
Für Hinweise die ein Anfänger hinkriegt wäre ich super dankbar, ich habe jetzt einige Nächte probiert und komme alleine einfach nicht weiter.
Herzlichen Dank, Thomas
@Mathias: Mark Jaquith (WordPress Lead Developer) hat auch nochmal etwas über die thumbnails geschrieben -> hier.
@Thomas: Ohne den Code zu sehen, kann ich dir leider auch nicht helfen. Am Besten, du wendest dich an den Themeersteller.
Dank dir Micha. Hat mich ein Stück nach vorne gebracht.
Danke für die Anleitung.
Habe das nun eingebaut und es funktioniert.
Tipp: Um “the_post_thumbnail ” auch ins RSS einzufügen, habe ich folgenden Code gefunden, welcher in die functions.php einfügt werden muss:
—
function rss_post_thumbnail($content) {global $post;
if(has_post_thumbnail($post->ID)) {
$content = '' . get_the_post_thumbnail($post->ID) .
'' . get_the_content();
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');
function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '' . get_the_post_thumbnail($post->ID) .
'' . get_the_content();
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');
Hallo Micha,
danke erstmal für den netten Beitrag.
Gibt es eine Möglichkeit auch Medium Bilder genau auf eine größe anzupassen? Habe es grade geschafft das, dass post_thumbnail extern vom Loop in einem div ausgegeben wird, leider nimmt er dann immer eine der beiden größen und passt das Bild darauf an. Dann passt es aber nicht genau ins div, jetzt wäre es super wenn ich wp sagen könnte das es die bilder immer auf 500 breit machen soll und die höhe dann beschneiden soll. im backend gib es ja diese funktion, leider nur bei den thumbnails und nicht bei medium bilder. Gibt es da seit wp 3.0 einen neuen lösungsansatz ohne das ich externe scripte nutzen muss? vielen Dank!
Enfach in deine functions.php
add_image_size('mymedium', 500, 225, true);
500 ist die Breite, 225 die Höhe und true ist croppen. Wenn du nicht croppen willst, setze das auf false oder lass es weg.
Die Bilder werden aber erst ab dem Zeitpunkt des Eintragens erzeugt. Aufrufen tust du die dann im Template
the_post_thumbnail( 'mymedium', array( 'class' => 'alignleft' ) )