Bildgrößen erklärt

Wenn Sie ein Bild auf Ihre WordPress–Website hochladen, werden seine Kopien erstellt – Bilder mit zusätzlichen Größen. Warum brauchen wir sie? Weil wir nicht überall auf der Website die gleiche Bildgröße verwenden:

• in Beiträgen,
• im Portfolio,
• in Popups,
• als Post-Thumbnails auf Archivseiten,
• in Widgets,
• im Administrationsbereich usw;

Mit WordPress können Sie beispielsweise Bilder in voller Größe auf Beitragsseiten und 150 × 150 (zum Beispiel) Bilder auf Archivseiten verwenden.

Aber warten Sie ✋ – denken Sie daran, dass je mehr registrierte Bildgrößen Sie haben, desto mehr Dateien werden auf Ihrer Website sein und mehr Zeit wird benötigt, um Bilder während des Uploads zu verarbeiten.

Standard-WordPress-Bildgrößen

WordPress unterstützt standardmäßig mehrere Bildgrößen. Sie können sie im Administrationsbereich unter „Einstellungen > Medien“ finden und ändern.

So können Sie beispielsweise die Größe der WordPress-Miniaturansichten auf dieser Seite ändern.

Was ist, wenn Sie sie nicht verwenden und nicht möchten, dass WordPress für jede dieser Größen eine Kopie generiert. Sie können den folgenden Hook in Ihr Thema einfügen functions.php.

Aber denken Sie immer daran, dass, wenn Ihr WordPress-Theme Updates erhält, dann besser ein Child-Theme oder ein benutzerdefiniertes Plugin verwenden.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes'); function misha_turn_off_default_sizes( $default_image_sizes) { unset( $default_image_sizes); // turn off thumbnail sizeunset( $default_image_sizes); // turn off medium sizeunset( $default_image_sizes); // turn off large size return $default_image_sizes; }

medium_large

Die medium_large Bildgröße erschien in WordPress 4.4 zusammen mit Responsive images Feature. Es hat eine feste Breite 768 und eine proportionale Höhe.

Sie können medium_large Größe so einfach wie mit diesem Code deaktivieren:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large'); function misha_deactivate_medium_large( $default_image_sizes ){ $default_image_sizes;return $default_image_sizes; }

Wie bekomme ich alle Bildgrößen?

Manchmal muss man herausfinden, was die Liste der verfügbaren Bildgrößen auf der Website ist. Leider gibt es keine übliche Möglichkeit, dies sowohl für Standard- als auch für benutzerdefinierte Bildgrößen zu tun:

• Wenn Sie die Liste der Standardbildgrößen benötigen, können Sie get_intermediate_image_sizes() , das ein Array mit Standardbildgrößen zurückgibt, Beispiel:

  print_r( get_intermediate_image_sizes() );/* Array ( => thumbnail => medium => medium_large => large ) */

• Wenn Sie registrierte Bildgrößen auflisten müssen, erhalten Sie sie von der globalen Variablen $_wp_additional_image_sizes, und ich kann Ihnen mehr teel , Sie können auch Bildabmessungen von dort erhalten, Beispiel:

  global $_wp_additional_image_sizes;print_r( $_wp_additional_image_sizes );/*Array( => Array ( => 400 => 400 => 1 ) => Array ( => 2000 => 1200 => 1 ))*/

Funktionen

Es ist einfach genug, WP–Bildgrößen im Administrationsbereich zu verwenden – alles, was Sie tun müssen, ist, eine gewünschte Bildgröße aus der Dropdown-Liste auszuwählen. Schauen wir uns dann besser die Funktionen an.

the_post_thumbnail()

Top 1 in meiner Liste, weil ich es öfter als alles andere benutze.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

Bitte beachten Sie, dass diese Funktion ein <img> -Tag und keine URL ausgibt.

$size Hier ist, was Sie als Parameterwert verwenden können:

• Bildgrößenbezeichner (Name) – medium, custom usw. standardmäßig thumbnail,

  // prints the featured image, size large of a current post in the loopthe_post_thumbnail( 'large' );

• benutzerdefinierte größe array( width, height ), beispiel:

  the_post_thumbnail( array( 100, 100 ) );

  Wenn Sie es verwenden, wird die am besten geeignete Bildgröße angezeigt.

• Sie können diesem Parameter den Wert full übergeben und ein Originalbild wird angezeigt.

$attr Sie können hier beliebige HTML-Attribute als Array übergeben, Sie können sogar das Attributsrcneu schreiben! 😁

the_post_thumbnail( 'medium', array( 'class' => 'my-image', 'data-id' => 1000 ) );

get_the_post_thumbnail()

Diese Funktion ist the_post_thumbnail() sehr ähnlich, der Unterschied ist, dass:

• Das erste get_the_post_thumbnail() ist eine Post-ID, alles andere ist dasselbe,
• Es gibt ein Bild zurück, druckt es nicht.

Beispiel:

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

wp_get_attachment_image_src()

Die Funktion ermöglicht das Abrufen einer Bild-URL.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

Bitte beachten Sie, dass eine Attachment ID keine Post ID ist. Aber Sie können es leicht bekommen, zum Beispiel, wenn Sie eine Featured Image ID benötigen, können Sie get_post_thumbnail_id() Funktion verwenden.

Beispiel:

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );echo $image_array;

Über den Parameter $size und ein Größenarray lesen Sie etwas weiter oben.

So fügen Sie Ihre benutzerdefinierten Bildgrößen hinzu

Dieser Vorgang ist sehr einfach und besteht aus zwei Schritten. Der erste Schritt ist erforderlich.

add_image_size()

Um eine Bildgröße in WordPress zu registrieren, können Sie diese Funktion in Ihrem aktuellen Thema functions.php oder in einem untergeordneten Thema functions.php oder in einem benutzerdefinierten Plugin verwenden.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );

$ size_name Sie können keine reservierten Bildgrößennamen verwenden, hier sind sie:

thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $width Breite in Pixel, set 0 – unbegrenzte Breite. $height Höhe in Pixel, set 0 – unbegrenzte Höhe, Beispiel:

add_image_size( 'fixedwidth500', 500, 0 ); // or just skip the third parameter

$ wie früher konnte dieser Parameter nurfalseodertrueakzeptieren, aber jetzt ist er viel erweiterter, also hier sind die möglichen Werte:

Schauen wir uns das Beispiel an:

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

Um die Dinge einfach zu halten, habe ich beschlossen, in diesem Beispiel eine quadratische Größe zu verwenden. So ist es leicht zu sagen, dass, wenn das Originalbild horizontal ist, der linke Teil des Bildes bleibt, aber der rechte Teil wird abgeschnitten, und das gleiche kann ich über vertikale Bilder sagen – der untere Teil des Bildes wird abgeschnitten.

Es ist auch möglich, mit dem Plugin „Manuelles Zuschneiden von Bildern“ manuell zuzuschneiden.

Aber erstellen Sie auch nicht viele Bildgrößen:

• je mehr Bildgrößen Sie erstellen, desto mehr Dateien befinden sich in Ihrem Uploads-Ordner,
• , und desto mehr Zeit benötigen Sie, um ein Bild auf Ihre Site hochzuladen.

So fügen Sie Ihre benutzerdefinierte Bildgröße zu Media Uploader und Gutenberg hinzu

Wenn Sie Bilder in Widgets und Posts einfügen, können Sie mit WordPress (3.5+) auswählen, welche Bildgröße verwendet werden soll:

Wie Sie sehen können, können Sie dort eine benutzerdefinierte Größe hinzufügen:

add_filter('image_size_names_choose', 'misha_new_image_sizes'); function misha_new_image_sizes($sizes) {$addsizes = array("my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)");$newsizes = array_merge( $sizes, $addsizes );return $newsizes;}

Das Coole ist, dass dieser Hook auch für Gutenberg Image Block funktioniert.

So regenerieren Sie Bilder, nachdem Sie ihre Größe geändert oder ein Thema geändert haben

Vielleicht kennen Sie die Situation, wenn WordPress nach dem Ändern der Parameter von add_image_size() oder nach dem Ändern Ihres Website-Themas keine Bildgrößen automatisch generiert und Bilder mit alten Auflösungen weiterhin auf der Website angezeigt werden.

Was sollten Sie in dieser Situation tun? Wenn sich nur 2-3 Bilder in Ihrem Upload-Ordner befinden, können Sie sie einfach erneut hochladen. Aber was tun, wenn es 2-3 Tausende von Bildern gibt?

Es gibt zwei Möglichkeiten, diese Situation zu lösen – mit Plugins und mit Code:

Miniaturansichten mit Plugins regenerieren

Ok, ich kann Ihnen zwei einfache Plugins empfehlen:

• Ajax Thumbnail Rebuild
• Force Regenerate Thumbnail

Jeder von ihnen hat seine eigenen Vor- und Nachteile.

Thumbnails programmgesteuert regenerieren

Hier möchte ich Ihnen nur den Code zeigen, mit dem Sie Bilder regenerieren können, wie Sie ihn verwenden – Sie haben die Wahl.

$attachment_id = 5; // pass your attachment ID here $path = get_attached_file( $attachment_id );$meta = wp_generate_attachment_metadata( $attachment_id, $path );wp_update_attachment_metadata( $attachment_id, $meta );

So erstellen Sie bestimmte Thumbnails in Bildgröße nur für benutzerdefinierte Beitragstypen

Stellen wir uns also vor, Ihre Website verfügt über 10 registrierte benutzerdefinierte Beitragstypen, von denen jeder 2-3 Bildgrößen auf den Seiten der Website verwendet. Es ist leicht zu verstehen, dass WordPress beim Hochladen eines Bildes auf die Website 20-30 Kopien davon erstellt!

Es gibt keine Möglichkeit, add_image_size() für einen benutzerdefinierten Beitragstyp zu verwenden, aber hier ist ein kleiner Code, der dieses Problem löst. Dieser Code teilt WordPress mit, wann eine bestimmte Auflösungskopie des Bildes erstellt werden muss und wann nicht.

Sowohl intermediate_image_sizes als auch intermediate_image_sizes_advanced Hooks sind für diese Aufgabe in Ordnung. Ein super einfaches Beispiel unten, nachdem Sie den Code in Ihre functions.php -Datei eingefügt haben, werden Miniaturansichten my-image-size-name nicht für Bilder erstellt, die vom benutzerdefinierten Beitragstyp page hochgeladen wurden.

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){ if( isset( $_REQUEST ) && 'page' == get_post_type($_REQUEST ) ) {unset( $sizes );} return $sizes; } );

Ein etwas komplizierteres Beispiel, aber es ist auch richtig:

/* * this hook will be fired while you uploading a picture */add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' ); function misha_reduce_image_sizes( $sizes ){/* * $sizes - all image sizes array Array ( => thumbnail => medium => large => post-thumbnail ) * get_post_type() to get post type */$type = get_post_type($_REQUEST); // $_REQUEST post id the image uploads to foreach( $sizes as $key => $value ){ /* * use switch if there are a lot of post types */if( $type == 'page' ) {if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages unset( $sizes ); }} else if ( $type == 'region' ) {if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335' unset( $sizes ); }} else {if( $value != 'thumbnail' ){ // turn off everything except thumbnail unset( $sizes ); }}}return $sizes;}

Misha Rudrastyh

Ich liebe WordPress, WooCommerce und Gutenberg so sehr. 12 jahre Erfahrung.

Benötigen Sie benutzerdefinierte Entwicklerhilfe? Kontaktieren Sie uns