rozmiary obrazów wyjaśnione

po przesłaniu obrazu do witryny WordPress zostaną utworzone jego kopie-obrazy o dodatkowych rozmiarach. Po co nam one? Ponieważ nie używamy tego samego rozmiaru obrazu wszędzie na stronie:

• w postach,
• w portfolio,
• w wyskakujących okienkach,
• jako miniatury postów na stronach archiwalnych,
• w widżetach,
• w obszarze administracyjnym itp;

tak więc, na przykład WordPress pozwala na użycie pełnowymiarowego obrazu na stronach postów i 150×150 (na przykład) obrazów na stronach archiwalnych.

ale poczekaj ✋ – pamiętaj, że im więcej masz zarejestrowanych rozmiarów obrazów, tym więcej plików będzie na twojej stronie i więcej czasu będzie potrzebne na przetworzenie zdjęć podczas przesyłania.

domyślne rozmiary obrazów WordPress

WordPress domyślnie obsługuje kilka rozmiarów obrazów. Można je znaleźć i zmienić w obszarze administracji w „Ustawienia > Media”.

więc na przykład możesz zmienić rozmiar miniatury WordPress na tej stronie.

co jeśli ich nie używasz i nie chcesz, aby WordPress generował kopię dla każdego z tych rozmiarów. Możesz wstawić następujący hook do motywu functions.php.

ale zawsze pamiętaj, że jeśli twój motyw WordPress otrzyma aktualizacje, lepiej Użyj motywu podrzędnego lub niestandardowej wtyczki.

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

medium_large Rozmiar obrazu pojawił się w WordPress 4.4 wraz z funkcją responsywnych obrazów. Ma stałą szerokość 768 i proporcjonalną wysokość.

możesz dezaktywować medium_large Rozmiar tak prosty, jak w przypadku tego kodu:

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

jak uzyskać wszystkie rozmiary obrazów?

czasami musisz dowiedzieć się, jaka jest lista dostępnych rozmiarów obrazów na stronie internetowej. Niestety nie ma wspólnego sposobu, aby to zrobić zarówno dla domyślnych, jak i niestandardowych rozmiarów obrazów, więc:

• jeśli potrzebujesz listy domyślnych rozmiarów obrazu, możesz użyć get_intermediate_image_sizes(), która zwraca tablicę z domyślnymi rozmiarami obrazu, przykład:

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

• jeśli musisz wymienić zarejestrowane rozmiary obrazów, dostajesz je ze zmiennej globalnej $_wp_additional_image_sizes, a ja mogę ci więcej powiedzieć, możesz również uzyskać wymiary obrazu stamtąd, przykład:

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

funkcje

łatwo jest użyć rozmiarów obrazów WP w obszarze administracyjnym – wszystko, co musisz zrobić, to wybrać rozmiar obrazu, którego potrzebujesz z rozwijanego menu. Przyjrzyjmy się więc funkcjom.

the_post_thumbnail()

Top 1 na mojej liście, ponieważ używam go częściej niż cokolwiek innego.

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

należy pamiętać, że ta funkcja drukuje znacznik <img>, a nie Adres URL.

$size oto, czego możesz użyć jako wartości parametru:

• identyfikator rozmiaru obrazu (nazwa) – medium, custom itp., domyślnie thumbnail,

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

• niestandardowy rozmiar array( width, height ), przykład:

  the_post_thumbnail( array( 100, 100 ) );

  jeśli go użyjesz, zostanie wyświetlony najbardziej odpowiedni rozmiar obrazu.

• możesz przekazać wartość full do tego parametru i zostanie wyświetlony oryginalny obraz.

$attr tutaj możesz przekazać dowolne atrybuty HTML jako tablicę, możesz nawet przepisać atrybutsrc! 😁

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

get_the_post_thumbnail ()

ta funkcja jest bardzo podobna do the_post_thumbnail (), różnica polega na tym, że:

• pierwszy get_the_post_thumbnail() to identyfikator posta, reszta jest taka sama,
• zwraca obraz, a nie drukuje.

przykład:

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

wp_get_attachment_image_src ()

funkcja umożliwia uzyskanie adresu URL obrazu.

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

należy pamiętać,że identyfikator załącznika nie jest identyfikatorem postu. Ale możesz go łatwo uzyskać, na przykład jeśli potrzebujesz wyróżnionego identyfikatora obrazu, możesz użyć funkcji get_post_thumbnail_id().

przykład:

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

o parametrze $size i tablicy rozmiarów odczytanej nieco powyżej.

Jak dodać własne rozmiary obrazów

ten proces jest bardzo prosty i składa się z dwóch kroków. Wymagany jest pierwszy krok.

add_image_size ()

aby zarejestrować Rozmiar obrazu w WordPress, możesz użyć tej funkcji w bieżącym motywie functions.php lub w motywie podrzędnym functions.php lub w niestandardowej wtyczce.

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

$size_name nie można używać zarezerwowanych nazw rozmiaru obrazu, oto one:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $Szerokość Szerokość w pikselach, Ustaw 0-nieograniczona szerokość. $height wysokość w pikselach, Ustaw 0-nieograniczona wysokość, przykład:

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

$Przytnij wcześniej ten parametr mógł zaakceptować mógł zaakceptować tylkofalselubtrueale teraz jest znacznie bardziej rozszerzony, więc oto możliwe wartości:

spójrzmy na przykład:

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

aby wszystko było proste, w tym przykładzie użyłem kwadratu. Łatwo więc powiedzieć, że jeśli oryginalny obraz jest poziomy, lewa część obrazu pozostanie, ale prawa część zostanie przycięta, i to samo mogę powiedzieć o obrazach pionowych-dolna część obrazu zostanie przycięta.

możliwe jest również ręczne przycinanie za pomocą wtyczki „ręczne Przycinanie obrazu”.

ale nie tworzy zbyt wielu rozmiarów obrazu:

• im więcej obrazów tworzysz-tym więcej plików będzie w folderze przesłane,
• i tym więcej czasu będzie potrzeba na przesłanie obrazu do twojej witryny.

Jak dodać niestandardowy rozmiar obrazu do programu Media Uploader i Gutenberg

po wstawieniu obrazów do widżetów i postów, WordPress (3.5+) pozwala wybrać rozmiar obrazu, którego użyć:

jak widać, można tam dodać niestandardowy rozmiar:

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;}

fajne jest to, że ten hak działa również dla bloku obrazu Gutenberga.

jak zregenerować obrazy po zmianie ich rozmiarów lub zmianie motywu

być może znasz sytuację, gdy po zmianie parametrów add_image_size() lub po zmianie motywu witryny WordPress nie generuje automatycznie rozmiarów obrazów, a obrazy ze starymi rozdzielczościami nadal są wyświetlane na stronie.

co powinieneś zrobić w tej sytuacji? Jeśli w folderze przesłane są tylko 2-3 zdjęcia, możesz je po prostu ponownie przesłać. Ale co zrobić, jeśli są 2-3 tysiące obrazów?

istnieją dwa sposoby rozwiązania tej sytuacji – za pomocą wtyczek i kodu:

regeneruj miniaturki za pomocą wtyczek

Ok, mogę ci polecić dwie proste wtyczki:

• Ajax thumbnail Rebuild
• Force Regenerate Thumbnail

każdy z nich ma swoje zalety i wady, więc może w różnych sytuacjach możesz wybrać, który plugin bardziej pasuje do ciebie.

programowo regeneruj miniatury

tutaj chcę tylko pokazać ci kod, który pozwala na regenerację zdjęć, jak go użyjesz – wybór należy do ciebie.

$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 );

Jak utworzyć miniatury o określonym rozmiarze obrazu tylko dla niestandardowych typów postów

wyobraźmy sobie, że Twoja witryna ma zarejestrowane niestandardowe typy postów 10, a każdy z nich używa rozmiarów obrazów 2-3 na stronach witryny. Łatwo zrozumieć, że po przesłaniu dowolnego zdjęcia na stronie WordPress tworzy 20-30 kopii tego!

nie ma sposobu, aby użyć add_image_size() dla niestandardowego typu postu, ale tutaj jest mały kawałek kodu, który rozwiązuje ten problem. Ten kod mówi WordPressowi, kiedy musi utworzyć określoną kopię obrazu w rozdzielczości, a kiedy nie.

zarówno intermediate_image_sizes, jak i intermediate_image_sizes_advanced Hooki są w porządku dla tego zadania. Super prosty przykład poniżej, po wstawieniu kodu do pliku functions.php miniatury my-image-size-namenie zostaną utworzone dla obrazów przesłanych z niestandardowego typu postu page.

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

trochę bardziej skomplikowany przykład, ale jest również poprawny:

/* * 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

tak bardzo kocham WordPressa, WooCommerce i Gutenberga. 12 lat doświadczenia.

potrzebujesz pomocy programisty? Skontaktuj się z nami