Wordpress soprende per la semplicità con la quale consente di ottenere configurazioni avanzate. Vediamo oggi gli snippet necessari per modificare le dimensioni delle nostre thumbails o aggiungerne di nuove, lasciando che sia il Cms ad occuparsi del resize.
Quando impostiamo un'immagine in evidenza in un post (mediante l'apposita funzione posta in basso a destra nel pannello di gestione del contenuto), Wordpress non si limita all'upload del file o ai controlli di sicurezza. Crea diverse versioni della stessa immagine, da richiamare secondo opportunità. Una thumbnail piccola viene chiamata ad esempio nella pagina dell'archivio, un'altra di dimensioni diverse viene magari richiamata nel caso in cui il template sia di tipo responsive e debba rispondere ad un browser smartphone e cosi via.
Se wordpress gestisce il codice php di ridimensionamento delle immagini, è compito del template decidere come e quali thumb usare.
Ad esempio il template (installato di default) twentyfourteen utilizza una versione ingrandita dell'immagine:
riservando le thumb ai browser smartphone. Come possiamo cambiare questo comportamento e far utilizzare al template thumbnail di dimensioni di nostra preferenza?
Apriamo il file functions.php dentro la cartella wp-content/themes/twentyfourteen. Attorno alla riga 79, il template utilizza queste istruzioni
// Enable support for Post Thumbnails, and declare two sizes.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 672, 372, true );
add_image_size( 'twentyfourteen-full-width', 1038, 576, true );
La prima richiede il supporto delle librerie di gestione delle thumbnails, la seconda riga imposta le dimensioni delle thumb e la terza aggiunge una nuova dimensione di miniature, di 1038px di altezza per 576 di larghezza.
Vediamo come aggiungere un'ulteriore versione di thumbnail, ad esempio una versione quadrata di 164px:
add_image_size( 'twentyfourteen-quadrata', 164, 164, true );
Proviamo a ricaricare l'immagine del post precedente (cosi da consentire a Wordpress il nuovo ridimensionamentoI e vediamo cosa accade nella nostra cartella. Una nuova thumb di 164px è stata creata per noi!
Guardate attentamente la thumb dell'immagine 164*164 (la seconda nella seconda fila dello screenshot qui in alto). Se fate caso, sia a destra che a sinistra manca un pezzo, si vede chiaramente nel secchiello - confrontatelo con l'ultima thumb. Questo perché abbiamo specificato come ultimo parametro della funzione add_image_size il booleano true, che indica a wordpress di tagliare l'immagine nel caso in cui le dimensioni passate non siano proporzionali. Infatti, abbiamo passato dimensioni quadrate per un'immagine rettangolare; un ridimensionamento forzato avrebbe distorto il viso del povero gattino. Impostando come ultimo parametro il booleano true, indichiamo a Wordpress di tagliare (crop) l'immagine; in caso di parametro impostato a false oppure non impostato, l'immagine viene sempre ridimensionata, anche se questo comporta una perdita di qualità.
Passiamo adesso al frontend: non è cambiato nulla, vediamo ancora l'immagine grande tipica del template twentyfourteen. Per cambiarla andiamo, nella stessa cartella, nel file content.php ed editiamo questa riga:
<?php twentyfourteen_post_thumbnail(); ?>
sostituendola con the_post_thumbnail() e passando come parametro il nome della thumb che avevamo deciso poco fa:
<?php the_post_thumbnail( 'twentyfourteen-quadrata' ); ?>
Apriamo l'articolo modificato poco fa ed ecco qui la nostra thumbnail impostata!
