dimensiuni de imagine explicate

când încărcați o imagine pe site – ul dvs. De ce avem nevoie de ele? Pentru că nu folosim imaginea de aceeași dimensiune peste tot pe site:

• în posturi,
• în portofoliu,
• în pop-up,
• ca miniaturi post pe paginile de arhivă,
• în widget-uri,
• în zona de administrare etc;

deci, de exemplu, WordPress vă permite să utilizați imaginea full size pe paginile de posturi și 150 150 (de exemplu) imagini de pe paginile de arhivă.

dar așteptați – rețineți că cu cât aveți mai multe dimensiuni de imagine înregistrate, cu atât mai multe fișiere vor fi pe site-ul dvs. web și va fi nevoie de mai mult timp pentru a procesa imaginile în timpul încărcării.

dimensiuni implicite de imagine WordPress

WordPress acceptă mai multe dimensiuni de imagine în mod implicit. Le puteți găsi și modifica în zona de administrare în „Setări > Media”.

deci, de exemplu, puteți schimba dimensiunea miniaturii WordPress pe această pagină.

ce se întâmplă dacă nu le folosiți și nu doriți ca WordPress să genereze o copie pentru fiecare dintre aceste dimensiuni. Puteți introduce următorul cârlig în tema dvs. functions.php.

dar rețineți întotdeauna că, dacă tema dvs.

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

dimensiunea imaginii medium_large a apărut în WordPress 4.4 împreună cu funcția de imagini receptive. Are lățime fixă 768 și înălțime proporțională.

puteți dezactiva dimensiunea medium_large la fel de simplă ca și cu acest cod:

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

cum să obțineți toate dimensiunile imaginii?

uneori trebuie să aflați care este lista dimensiunilor de imagine disponibile pe site. Din păcate, nu există o modalitate comună de a face acest lucru atât pentru dimensiunile implicite, cât și pentru cele personalizate, deci:

• dacă aveți nevoie de lista de dimensiuni implicite ale imaginii, puteți utiliza get_intermediate_image_sizes(), care returnează o matrice cu dimensiuni implicite ale imaginii, de exemplu:

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

• dacă trebuie să listați dimensiunile imaginii înregistrate, le obțineți de la $_wp_additional_image_sizes variabila globală și vă pot spune mai multe, puteți obține și dimensiunile imaginii de acolo, de exemplu:

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

funcții

este destul de ușor să utilizați dimensiunile imaginii WP în zona de administrare – tot ce trebuie să faceți este să selectați o dimensiune a imaginii de care aveți nevoie din meniul derulant. Să ne uităm mai bine la funcții atunci.

the_post_thumbnail()

Top 1 în lista mea, pentru că o folosesc mai des decât orice altceva.

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

rețineți că această funcție imprimă o etichetă <img>, nu o adresă URL.

$Dimensiune aici este ceea ce se poate folosi ca valoare parametru:

• image size identifier (nume) – medium, custom etc, în mod implicit thumbnail,

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

• dimensiune personalizată array( width, height ), exemplu:

  the_post_thumbnail( array( 100, 100 ) );

  dacă îl utilizați, va fi afișată cea mai potrivită dimensiune a imaginii.

• puteți transmite valoarea full acestui parametru și va fi afișată o imagine originală.

$attr puteți trece orice atribute HTML aici ca o matrice, puteți rescrie chiarsrcatribut! 😁

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

get_the_post_thumbnail ()

această funcție este foarte asemănătoare cu the_post_thumbnail (), diferența este că:

• primul get_the_post_thumbnail() este un ID de postare, orice altceva este același,
• returnează o imagine, nu o imprimă.

exemplu:

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

wp_get_attachment_image_src ()

funcția permite obținerea unei adrese URL a imaginii.

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

rețineți că un ID de atașament nu este un ID de postare. Dar îl puteți obține cu ușurință, de exemplu, dacă aveți nevoie de un ID de imagine prezentat, puteți utiliza funcția get_post_thumbnail_id().

exemplu:

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

despre parametrul $size și o matrice de dimensiuni citiți puțin mai sus.

cum să adăugați dimensiunile personalizate ale imaginii

acest proces este foarte simplu și constă din doi pași. Primul pas este necesar.

add_image_size()

pentru a înregistra o dimensiune a imaginii în WordPress, puteți utiliza această funcție în tema curentă functions.php sau într-o temă copil functions.php sau într-un plugin personalizat.

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

$size_name nu puteți utiliza nume de dimensiuni rezervate ale imaginii, aici sunt:thumb,thumbnail,post-thumbnail

,medium,medium_large,large,full. $lățime lățime în pixeli, set 0-lățime nelimitată. $înălțime înălțime în pixeli, set 0-Înălțime nelimitată, exemplu:

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

$decupați mai devreme acest parametru ar putea accepta ar putea accepta doarfalsesautruedar acum este mult mai extins, deci aici sunt valorile posibile:

să aruncăm o privire la exemplu:

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

pentru a păstra lucrurile simple, am decis să folosesc o dimensiune pătrată în acest exemplu. Deci, este ușor de spus, că dacă imaginea originală este orizontală, partea stângă a imaginii va rămâne, dar partea dreaptă va fi decupată și același lucru pot spune despre imaginile verticale – partea de jos a imaginii va fi decupată.

de asemenea, este posibil să se facă manual decuparea Folosind „Manual Image Crop” plugin.

dar nu creați și o mulțime de dimensiuni de imagine:

• cu cât creați mai multe dimensiuni de imagine — cu atât mai multe fișiere vor fi în folderul încărcări,
• și cu atât va fi nevoie de mai mult timp pentru a încărca o imagine pe site-ul dvs.

cum să adăugați dimensiunea personalizată a imaginii la Media Uploader și Gutenberg

când inserați imagini în widget-uri și postări, WordPress (3.5+) vă permite să alegeți ce dimensiune a imaginii să utilizați:

după cum puteți vedea, este posibil să vă adăugați dimensiunea personalizată acolo:

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

interesant este că acest cârlig funcționează și pentru blocul de imagini Gutenberg.

cum se regenerează imaginile după schimbarea dimensiunilor sau schimbarea unei teme

poate știți situația când după schimbarea parametrilor add_image_size() sau după schimbarea temei site-ului dvs. WordPress nu generează automat dimensiuni de imagine și imaginile cu rezoluții vechi sunt încă afișate pe site.

ce ar trebui să faceți în această situație? Dacă există doar 2-3 imagini în folderul încărcări, le puteți reîncărca pur și simplu. Dar ce să facem dacă există 2-3 mii de imagini?

există două modalități de a rezolva această situație – cu pluginuri și cu cod:

regenerați miniaturile cu pluginuri

Ok, vă pot recomanda două pluginuri simple:

• Ajax miniatură reconstrui
• forța regenera miniatură

fiecare dintre ele are propriile sale avantaje și dezavantaje, asa ca poate pentru situații diferite, puteți alege ce plugin mai potriveste pentru tine.

regenerați miniaturile programatic

aici vreau doar să vă arăt codul care permite regenerarea imaginilor, cum îl veți folosi – este alegerea dvs.

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

cum se creează anumite miniaturi de dimensiune a imaginii numai pentru tipurile de postări personalizate

deci, să ne imaginăm că site-ul dvs. web are 10 tipuri de postări personalizate înregistrate și fiecare dintre ele utilizează 2-3 dimensiuni de imagine pe paginile site-ului web. Este ușor de înțeles că atunci când încărcăm orice imagine pe site-ul WordPress creează 20-30 de copii ale acesteia!

nu există nici o modalitate de a utiliza add_image_size() pentru un tip de mesaj personalizat, dar aici este o mică bucată de cod care rezolvă această problemă. Acest cod spune WordPress atunci când trebuie să creeze o anumită copie rezoluție a imaginii și atunci când nu.

atât intermediate_image_sizes și intermediate_image_sizes_advanced cârlige sunt OK pentru această sarcină. Un exemplu foarte simplu de mai jos, după ce introduceți codul în miniaturile fișierului functions.php my-image-size-name nu vor fi create pentru imagini, încărcate din tipul de postare personalizat page.

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

un exemplu puțin mai complicat, dar este, de asemenea, corect:

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

îmi place WordPress, WooCommerce și Gutenberg atât de mult. 12 ani de experiență.

aveți nevoie de ajutor personalizat pentru dezvoltatori? Luați legătura cu