Eigene Bildgrößen in der WordPress-Mediathek auswählbar machen

Dass man bei WordPress relativ leicht eigene Bildgrößen einstellen kann und in seinem Template einbinden kann ist meiner Meinung nach recht bekannt. Vor kurzem brauchte ich jedoch die Möglichkeit, dass der Anwender eben diese eigens angelegten Bildgrößen auch selber auswählen kann und sich nicht nur zwischen den vordefinierten Bildgrößen entscheiden muss:

Dazu bietet WordPress einen schönen Filter, welcher leicht zu implementieren ist. Vorerst jedoch muss man die Voraussetzung schaffen, um eigene Bildgrößen anlegen zu können. Der nachfolgende Code erklärt, wie man sowohl eigene Bildgrößen definiert und wie man diese in der Mediathek beim Bild einfügen – Dialog auswählbar macht. Er ist in die functions.php-Datei des Themes einzubauen:

/**
 * Enable support for Post Thumbnails 
 * (Support für eigene Bildgrößen einschalten)
 */
add_theme_support( 'post-thumbnails' );
 
/**
 * Add custom image sizes 
 * (Eigene Bildgrößen hinzufügen)
 */
add_action( 'after_setup_theme', 'af_add_custom_image_sizes' );
function af_add_custom_image_sizes() {
              //params: 'size-name', width, height, crop
    add_image_size( 'home-featured-image', 306, 152, false );
    add_image_size( 'imageslider-preview', 180, 240, false);
    add_image_size( 'imageslider-view', 99999, 600, false);
}
/**
 * Make custom image sizes available via media manager 
 * (Eigene Bildgrößen in der Mediathek verfügbar machen)
 */
add_filter( 'image_size_names_choose', 'custom_image_sizes_choose' );
function custom_image_sizes_choose( $sizes ) {
	$custom_sizes = array(
			'home-featured-image' => 'Startseitenbilder',
			'imageslider-preview' => 'Slider-Vorschau',
			'imageslider-view' => 'Slider-Bild'
	);
	return array_merge( $sizes, $custom_sizes );
}

Wichtig ist, dass man die Bezeichnung des ersten Parameters bei add_image_size gleich setzt zu den Keys im Array $custom_sizes. Am besten speichert man sich diese in einer eigenen Variable.
Im Template kann man dann über die Bezeichnungen die entsprechende Bildgröße einbinden:

/**
 * into the loop
 * (innerhalb des Loops)
 */
if(has_post_thumbnail()){
	the_post_thumbnail('home-featured-image');
}
/**
 * somewhere else i.e. outside the loop
 * woanders, z.B. außerhalb des Loops
 */
if(has_post_thumbnail($post->ID)){
	echo get_the_post_thumbnail($post->ID, 'home-featured-image');
}

Auch kann man die eigene Bildgröße in allen Bildfunktionen verwenden, die $size als Parameter empfangen können, beispielsweise wp_get_attachment_image(), wp_get_attachment_image_src() oder wp_get_attachment_link(). Die letzten 3 Funktionen benötigen jedoch eine Attachment-ID als Pflichtparameter (siehe Dokuverlinkungen).

Das Ergebnis in meinem Beispiel kann nun folgendermaßen aussehen:

Sieht man hinter den eigenen Bildgrößen keine Dateimaße und sind die Radio-Buttons ausgegraut und nicht anklickbar, so existiert diese Datei nicht in diesem Format. Gründe dafür können sein, dass sie zu klein ist für die eingestellte Bildgröße und somit nicht erstellt werden konnte oder dass die Datei hochgeladen wurde, bevor man die eigenen Bilddateigrößen festgelegt hat. Im Normalfall sollte jedoch folgende Ansicht danach vorhanden sein:

Viel Erfolg beim Umsetzen! Feedback und Verbesserungsvorschläge immer erwünscht! 🙂