Dimensioni immagine spiegate

Quando carichi un’immagine sul tuo sito web WordPress, verranno create le sue copie – immagini con dimensioni aggiuntive. Perché abbiamo bisogno di loro? Perché non usiamo la stessa immagine di dimensioni ovunque sul sito:

• nei post,
• nel portfolio,
• nei popup,
• come miniature dei post sulle pagine di archivio,
• nei widget,
• nell’area di amministrazione, ecc;

Quindi, ad esempio WordPress consente di utilizzare immagini a grandezza naturale su pagine di post e 150×150 (ad esempio) immagini su pagine di archivio.

Ma aspetta ✋ – tieni presente che più dimensioni di immagine registrate hai, più file saranno sul tuo sito web e più tempo sarà necessario per elaborare le immagini durante il caricamento.

Dimensioni predefinite delle immagini WordPress

WordPress supporta diverse dimensioni delle immagini per impostazione predefinita. Puoi trovarli e modificarli nell’area di amministrazione in “Impostazioni > Media”.

Quindi, ad esempio, puoi modificare le dimensioni delle miniature di WordPress in questa pagina.

Cosa succede se non li usi e non vuoi che WordPress generi una copia per ciascuna di queste dimensioni. Puoi inserire il seguente gancio nel tuo tema functions.php.

Ma tieni sempre presente che se il tuo tema WordPress riceve aggiornamenti, allora è meglio usare un tema figlio o un plugin personalizzato.

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

La dimensione dell’immagine medium_large è apparsa in WordPress 4.4 insieme alla funzionalità responsive images. Ha larghezza fissa 768 e altezza proporzionale.

È possibile disattivare medium_large dimensione semplice come con questo codice:

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

Come ottenere tutte le dimensioni dell’immagine?

A volte devi scoprire qual è l’elenco delle dimensioni delle immagini disponibili sul sito web. Sfortunatamente non esiste un modo comune per farlo sia per le dimensioni predefinite che per le immagini personalizzate, quindi:

• Se è necessario l’elenco delle dimensioni predefinite dell’immagine, è possibile utilizzare get_intermediate_image_sizes(), che restituisce un array con dimensioni predefinite dell’immagine, ad esempio:

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

• Se si dispone di elencare registrato le dimensioni delle immagini, provenienti da $_wp_additional_image_sizes variabile globale, e mi avverte di più, si può anche ottenere le dimensioni dell’immagine da lì, esempio:

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

Funzioni

è abbastanza facile da usare WP dimensioni dell’immagine in area amministrazione – tutto quello che dovete fare è selezionare un’immagine dimensione desiderata dal menu a discesa. Facciamo meglio a dare un’occhiata alle funzioni allora.

the_post_thumbnail ()

Top 1 nella mia lista, perché lo uso più spesso di ogni altra cosa.

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

Si noti che questa funzione stampa un tag <img>, non un URL.

$size Ecco cosa si può utilizzare come valore di un parametro:

• dimensione immagine identificatore (nome) – medium, custom ecc, per impostazione predefinita thumbnail,

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

• dimensioni personalizzate array( width, height ), esempio:

  the_post_thumbnail( array( 100, 100 ) );

  Se lo si utilizza, l’immagine più appropriata dimensione sarà visualizzato.

• è possibile passare il valore full a questo parametro e verrà visualizzata un’immagine originale.

att attr Puoi passare qualsiasi attributo HTML qui come array, puoi persino riscrivere l’attributosrc! 😁

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

get_the_post_thumbnail()

Questa funzione è molto simile a the_post_thumbnail(), la differenza è che:

• Il primo get_the_post_thumbnail() è un post ID, tutto il resto è la stessa,
• restituisce un’immagine, non la stampa.

Esempio:

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

wp_get_attachment_image_src ()

La funzione consente di ottenere un URL di immagine.

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

Si prega di notare, che un ID allegato non è un ID post. Ma puoi facilmente ottenerlo, ad esempio se hai bisogno di un ID immagine in primo piano, puoi usare la funzione get_post_thumbnail_id().

Esempio:

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

Informazioni sul parametro $size e un array di dimensioni leggere un po ‘ sopra.

Come aggiungere le dimensioni delle immagini personalizzate

Questo processo è molto semplice e consiste in due passaggi. Il primo passo è richiesto.

add_image_size ()

Per registrare una dimensione dell’immagine in WordPress è possibile utilizzare questa funzione nel tema corrente functions.php o in un tema figlio functions.php o in un plugin personalizzato.

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

$size_name Non è possibile utilizzare nomi di dimensioni immagine riservati, eccoli qui:

thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. $larghezza Larghezza in pixel, impostare 0-larghezza illimitata. $altezza Altezza in pixel, imposta 0-altezza illimitata, esempio:

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

$coltura Precedente di questo parametro potrebbe accettare di poter accettare solofalseotruema ora è molto più esteso, così qui sono i valori possibili:

facciamo un esempio:

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

Per mantenere le cose semplici, ho deciso di utilizzare un formato quadrato in questo esempio. Quindi, è facile dire, che se l’immagine originale è orizzontale, la parte sinistra dell’immagine rimarrà, ma la parte destra verrà ritagliata, e lo stesso posso dire delle immagini verticali – la parte inferiore dell’immagine verrà ritagliata.

È anche possibile effettuare il ritaglio manuale utilizzando il plugin “Ritaglio immagine manuale”.

Ma non creare un sacco di dimensioni dell’immagine pure:

• più dimensioni di immagine crei, più file saranno nella cartella uploads,
• e più tempo sarà necessario per caricare un’immagine sul tuo sito.

Come Aggiungere un’Immagine Personalizzata Dimensione Media Uploader e Gutenberg

Quando si inseriscono immagini di widget e post, WordPress (3.5+) permette di scegliere che tipo di immagine dimensione:

Come si può vedere, è possibile aggiungere formato personalizzato c’:

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

La cosa interessante è che questo gancio funziona anche per Gutenberg blocco immagine.

Come rigenerare le immagini dopo aver cambiato le loro dimensioni o cambiando un tema

Forse conosci la situazione in cui dopo aver cambiato i parametri add_image_size() o dopo aver cambiato il tema del tuo sito web WordPress non genera automaticamente le dimensioni dell’immagine e le immagini con vecchie risoluzioni vengono ancora visualizzate sul sito.

Cosa dovresti fare in questa situazione? Se ci sono solo 2-3 immagini nella cartella uploads, puoi semplicemente ricaricarle. Ma cosa fare se ci sono 2-3 migliaia di immagini?

Esistono due modi per risolvere questa situazione: con i plugin e con il codice:

Rigenera le miniature con i plugin

Ok, posso consigliarti due semplici plugin:

• Ajax Thumbnail Rebuild
• Forza Rigenera Thumbnail

Ognuno di loro ha i suoi vantaggi e svantaggi, quindi forse per situazioni diverse puoi scegliere quale plugin più adatto a te.

Rigenera le miniature a livello di codice

Qui voglio solo mostrarti il codice che consente di rigenerare le immagini, come lo userai – è la tua scelta.

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

Come creare alcune miniature delle dimensioni dell’immagine solo per i tipi di post personalizzati

Quindi, immaginiamo che il tuo sito Web abbia 10 tipi di post personalizzati registrati e ognuno di essi utilizzi 2-3 dimensioni dell’immagine sulle pagine del sito web. E ‘ facile capire che quando carichiamo qualsiasi immagine sul sito WordPress crea 20-30 copie di esso!

Non c’è modo di usare add_image_size() per un tipo di post personalizzato, ma ecco un piccolo pezzo di codice che risolve questo problema. Questo codice dice a WordPress quando deve creare una certa copia di risoluzione dell’immagine e quando non lo fa.

Entrambi gli hook intermediate_image_sizes e intermediate_image_sizes_advanced sono OK per questa attività. Un esempio molto semplice di seguito, dopo aver inserito il codice nel tuo file functions.php le miniature my-image-size-name non verranno create per le immagini, caricate dal tipo di post personalizzato page.

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

Un esempio un po ‘ più complicato, ma è anche corretto:

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

Amo WordPress, WooCommerce e Gutenberg così tanto. 12 anni di esperienza.

Hai bisogno di aiuto per gli sviluppatori personalizzati? Entra in contatto