Nell’articolo di oggi vediamo nel dettaglio come vengono gestite e come funzionano le immagini inserite attraverso il media manager di WordPress. Inserire immagini nel nostro CMS dalla versione 4 è diventato ancora più semplice. Infatti oltre al classico tasto “aggiungi media” sopra la barra di scrittura è possibile fare un drag and drop direttamente dentro il testo.
Ma una volta inserite le immagini cosa succede?
Appena inserite WordPress andrà a creare 3 tipi di dimensionamento della stessa immagine. Ovvero:
- Miniatura (150 x 150 pixel )
- Media ( 300 x 300 pixel )
- Grande (1024 x 1024 pixel )
- Originale, l’immagine come l’avete caricata.
Queste misure sono quelle di default, sono modificabili e vedremo a breve possono non essere le sole. Inoltre la misura in pixel si riferisce a larghezza e altezza ma viene comunque preservata la proporzionalità, per cui sono indicazioni da intendersi come di massima. Nel solo caso della Miniatura è presente una flag che permetterà di forzare il dimensionamento fisso a 150 x 150 pixel.
Se poi l’immagine caricata è inferiore per dimensione ad uno dei tre formati (miniatura, media, grande) quello più grande non viene considerato. Ad esempio carico una immagina di 959 x 327 pixel, la proporzione nel formato grande non sarà presente, poiché come abbiamo detto per tale proporzione è di 1024 pixel di lato, quindi inferiore ai 959. Nella scheda di riepilogo del caricamento immagine avrete modo di apprezzare questo concetto.
Le informazioni relative alle dimensioni immagini base si possono trovare e modificare a piacimento sotto la voce Impostazioni -> Media.
Va specificato che una volta apportate le modifiche queste avranno effetto al loro primo utilizzo e non sono retroattive. Ergo le immagini caricate avranno i formati con le impostazioni precedenti.
Ma perché modificare questi parametri?
Dipende dal tema grafico che state utilizzando, o se ne state creando uno da zero, come utilizzerete tali informazioni. Ad esempio si può mostrare una miniatura dell’immagine in evidenza di un articolo nell’elenco archivio, tag. E utilizzare il formato grande nell’articolo completo. Questo farà in modo che non vengano caricate le immagini a dimensione massima in situazioni dove non lo richiedono e velocizzare in questo modo il caricamento delle pagine. Un vantaggio non indifferente visto che dovrete solo preoccuparvi di caricare l’immagine una volta soltanto, purché della dimensione minima richiesta.
Come abbiamo detto prima, le tre dimensioni base possono non essere sufficienti, quindi nel nostro tema possiamo prevedere ulteriori formati. La riga di codice andrà aggiunta al file functions.php (o relativo) nel nostro tema. Vediamo la sintassi:
add_image ( 'mioformato', 800, 600, false );Analizzando il codice, il primo parametro richiesto è un nome, nel caso sopra è mioformato ma può essere qualsiasi altra notazione ad eccezione di thumb, thumbnail, medium, large, post-thumbnail che sono riservati. Seguono il parametro di larghezza e altezza e il valore booleano indica la proporzionalità nel ridimensionare l’immagine. Ovvero False è proporzionale mentre True è taglierà ai valori indicati.
Tuttavia questo non basta se vogliamo aggiungerlo alla lista dei formati in fase di editing del Media Library. Per farlo dovremo aggiungere una funzione, sempre all’interno del file functions.php o equivalente del proprio tema:
add_filter( 'image_size_names_choose', 'mio_formato_personalizzato' );
function mio_formato_personalizzato( $sizes ) {
return array_merge( $sizes, array(
'mioformato' => __('Nome della dimensione personalizzata'),
) );
}Esaminando l’esempio qui sopra si aggiungerà il filtro alla funzione gancio del codice core di WordPress image_size_name_choose la funzione che andremo a creare. In quest’ultima non si fa altro che inserire nell’array la voce mioformato vista nel paragrafo precedente con add_image e una descrizione “parlante”.
Due esempi di utilizzo
Quanto visto fino ad ora appartiene alla sfera delle funzioni di backend (amministrazione) ma se vogliamo utilizzare questi formati nel nostro tema? Prendiamo in esame due differenti situazioni. Quella più classica è l’utilizzo dell’immagine in evidenza.
Questa particolare immagine è regolata dalla funzione core the_post_thumbnail.
Se vogliamo forzarla alla nostra dimensione che abbiamo chiamato mioformato, ecco come inseriremo il codice dentro la pagina dove dovrà apparire:
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'mioformato' );
}Se invece vogliamo trattare una immagine qualsiasi dovremo conoscerne l’ID che gli è stato assegnato
<?php echo wp_get_attachment_image( 33, 'mioformato' ); ?>dove appunto 33 è l’ID dell’immagine.
Conclusioni
WordPress è piuttosto ben congegnato nella gestione delle immagini, come abbiamo visto è in grado di creare in automatico delle miniature in varie dimensioni che sono utili nella velocità ed esecuzione di un sito. Se poi nella creazione di un tema facciamo riferimento a tali funzioni, anche creando formati a noi congeniali, non dovremo preoccuparci di ridimensionare le immagini e pensare solo al testo.