Schweizer WordPress Magazin

Nützliches

How-To: Post Thumbnail Format abwechseln

Die in WordPress 2.9 eingeführte Post Thumbnail Funktion ist für die meisten WordPress-Anwender noch relativ neu und deshalb findet man kaum gute Beispiele und Tutorials im Web. Heute möchten wir mit unseren Lesern ein nützliches Code Snippet teilen, mit welchem man bei jedem Beitrag manuell das Thumbnail Format festlegen kann.

Um die Post Thumbnails überhaupt erst nutzen zu können, müsst ihr in der functions.php eures Themes folgende Zeile hinzufügen: <?php add_theme_support( 'post-thumbnails' ); ?>.

Danach könnt ihr eure jeweiligen Bildgrössen definieren. Uns reichen für das Beispiel eine rechteckige und eine quadratische Form.

<?php
add_image_size( 'wpm_rectangular_thumbnail', 250, 75 ); // Rechteckiges Format
add_image_size( 'wpm_square_thumbnail', 75, 75 ); // Quadratisches Format
?>

Um dann die Post Thumbnails anzuzeigen, kann man dann innerhalb der Loop entweder <?php the_post_thumbnail('wpm_rectangular_thumbnail'); ?> oder <?php the_post_thumbnail 'wpm_square_thumbnail'); ?> verwenden.

Thumbnail Format auswählen

Da wir nicht genauer ins Detail gehen wollen, verweisen wir lieber auf die sehr ausführliche Anleitung von Mark Jaquith. Wir möchten euch ja zeigen, wie man die Bildgrössen manuell abwechseln kann. Dazu werden wir eine neue Meta-Box im Beitrags-Editor hinzufügen, wo man das gewünschte Format auswählen kann. Im Hintergrund werden diese Daten in einem versteckten Custom Field gespeichert.
Ihr müsst bloss folgenden Code in der functions.php eures Themes hinzufügen, evtl. müsst ihr auch die PHP-Tags am Anfang und am Ende entfernen.

<?php
/*
 * Fügt eine Meta Box im Beitrags-Editor hinzu,
 * mit der man wählen kann, ob das Thumbnail quadratisch oder rechteckig erscheinen soll.
 *
 * Autor: Schweizer WordPress Magazin
 *
 */

/* Hier haken wir uns in die admin_menu Action ein, um die Meta Box hinzuzufügen */
add_action('admin_menu', 'wpm_add_custom_box');

/* Hier haken wir uns in die save_post Action ein, um die eingegebenen Daten zu verarbeitena */
add_action('save_post', 'wpm_save_postdata');

/* Fügt die Meta Box im Beitrags-Editor hinzu */
function wpm_add_custom_box() {
	add_meta_box(
		'wpm_sectionid',
		__( 'Miniaturbild Format', 'wpm_textdomain' ),
		'wpm_inner_custom_box',
		'post',
		'advanced'
	);
}

/* Schreibt den Inhalt in die Meta Box */
function wpm_inner_custom_box() {

	// Nonce für die Verfikation benutzen

	echo '<input type="hidden" name="wpm_noncename" id="wpm_noncename" value="' .
    	wp_create_nonce( plugin_basename(__FILE__) ) . '" />';

	// Überprüfen, ob das Custom Field bereits existiert.

	$thumb = get_post_meta($post->ID, 'wpm_thumb_format', true);
	$square = "";
	$small = "";
	if(isset($thumb)) {
		if($thumb = 'wpm_square_thumbnail') {
			$square = 'checked="checked" ';
		}
		if($thumb = 'wpm_rectangular_thumbnail') {
	  		$small = 'checked="checked" ';
		}
	} else {
	  $small = 'checked="checked" ';
	}

	// Formular-Felder inklusive Beschreibung hinzufügen

	echo '<p>' . __("Soll das Thumbnail quadratisch oder rechteckig sein?", 'wpm_textdomain' ) . '</p>';
	echo '<p><input type="radio" name="wpm_thumb" value="wpm_square_thumbnail"
	id="wpm_square_thumbnail" size="25" ' . $square . '/>';
	echo '<label for="wpm_square_thumbnail">quadratisch</label>';
	echo '<input type="radio" name="wpm_thumb" value="wpm_rectangular_thumbnail"
	id="wpm_rectangular_thumbnail" size="25" ' . $small . '/>';
	echo '<label for="wpm_rectangular_thumbnail">rechteckig</label></p>';
}

// Wenn der Beitrag gespeichert wird, wird auch das Thumbnail Format gespeichert
function wpm_save_postdata( $post_id ) {

	// Sicherstellen, dass die Daten wirklich von unserem Beitrag stammen

	if ( !wp_verify_nonce( $_POST['wpm_noncename'], plugin_basename(__FILE__) )) {
		return $post_id;
	}

	// Überprüfen, ob dies eine automatische Sicherung des Beitrags ist.
	// Wenn ja, dann tun wir hier nichts.
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
		return $post_id;

	// Berechtigung des Nutzers überprüfen
	if ( 'page' == $_POST['post_type'] ) {
		if ( !current_user_can( 'edit_page', $post_id ) ) return $post_id;
	} else {
		if ( !current_user_can( 'edit_post', $post_id ) ) return $post_id;
	}

	// Wir sind authentifiziert: Jetzt können wir die Daten speichern

	$mydata = $_POST['wpm_thumb'];
	$thumb = get_post_meta($post->ID, '_wpm_thumb_format', true);
	if(isset($thumb)) {
		update_post_meta($post_id, '_wpm_thumb_format', $mydata);
	} else {
		add_post_meta($post_id, '_wpm_thumb_format', $mydata, true);
	}
}
?>

Das ist allerdings erst die halbe Miete, denn jetzt kommt noch die Ausgabe im Frontend. Dazu müsst ihr die Theme-Datei öffnen, welche für die Darstellung auf der Startseite zuständig ist (meist home.php). Dort fügt ihr dann an passender Stelle innerhalb des Loops folgende Zeilen ein:

<?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
	$thumb = get_post_meta($post->ID, "_wpm_thumb_format, true); ?>
	<div class="thumbnail">
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
			<?php if($thumb == "wpm_square_thumbnail") {
				the_post_thumbnail('wpm_square_thumbnail');
			} else {
				the_post_thumbnail('wpm_rectangular_thumbnail');
			} ?>
		</a>
	</div>
<?php }	?>

An dieser Stelle sei angemerkt, dass dieser Code vielleicht nicht zu 100% funktioniert, denn er wurde in nur wenigen Minuten geschrieben und war auch für persönliche Zwecke gedacht. Ihr könnt den Code zudem herunterladen und als Plugin installieren. Die Theme-Anpassung ist allerdings weiterhin erforderlich.

Wir freuen uns auf eure Anregungen, Fragen und Verbesserungsvorschläge!