In questa guida per WordPress vediamo come usare al meglio le post thumbnail (immagini in evidenza) e come creare delle dimensioni personalizzate per i post da usare nei nostri temi WordPress.
Per poter usare l’immagine in evidenza dobbiamo prima abilitare il tema. Per farlo andiamo nel file functions.php e inseriamo questo codice:
add_theme_support( 'post-thumbnails' );
Se volessimo abilitare il supporto solo per alcune tipologie di elementi (es. solo nelle pagine etc), possiamo dividere o omettere cosa preferiamo :
add_theme_support( 'post-thumbnails', array( 'post' ) ); // post add_theme_support( 'post-thumbnails', array( 'page' ) ); //pagine
Ad esempio, per fare chiarezza, possiamo abiliatare l’immagine in evidenza solo nelle pagine mettendo solamente questo codice:
add_theme_support( 'post-thumbnails', array( 'page' ) ); //pagine
NOTA: ovviamente se vuoi abilitare solo nelle pagine NON devi inserire anche
add_theme_support( 'post-thumbnails' );
Gestire le dimensioni delle thumbs
E’ possibile gestire la dimensione delle immagini. Per farlo devi prima sapere una cosa importante: WordPress divide le immagini in 3 “formati standard”, di default le dimensioni sono: thumbnails, medium, large. Dovrai ricordartene quando andrai a settare le TUE dimensioni personalizzate. Scrivendo infatti: set_post_med_size(…), non avrai nessun risultato. Questo perchè med non è un argomento valido, per WordPress equivale a scrivere “pippo” o “viva la pizza”.
Fatta questa premessa per impostare delle dimensioni personalizzate ai formati di base procediamo come segue:
Codice da inserire nel tuo functions.php
set_post_thumbnail_size( 50, 50 ); // 50x50pixel - box auto adattato set_post_thumbnail_size( 50, 50, true ); // 50x50pixel - box con hard crop
Qual’è la differenza? Bhè nel primo caso l’immagine viene adattata alla dimensione indicata (50px) proporzionalmente.Questo significa che nel caso la foto sia più corta, si potrebbero ottenere dimensioni differenti (es. 50px di larghezza e 25px di altezza). Per le immagini più “grandi” il problema può essere limitato usando 9999 come secondo valore per indicare a WordPress che non ci importa l’altezza dell’immagine ma vogliamo che la larghezza sia sempre costante.
Nel secondo caso l’hard cropping si dice a WordPress di ridimensionare la foto a 50x50px Se l’immagine è più piccola verrà stretchata (niente paura WordPress usa un algortimo per preservare l’aspect ratio). In ogni caso la foto potrebbe apparire non perfetta ma almeno sarete sicuri al 100% che la foto (qualsiasi venga caricata) avrà esattamente la larghezza e l’altezza costante indicata.
Il mio consiglio? Usate l’hard cropping per le foto “piccole” (es. thumb da 150×150 etc ), mentre usate il box proporzionale (primo caso) per le immagini in evidenza più grandi o medie( es. foto in evidenza nell’articolo singolo etc).
Gestire le immagini
Come faccio a richiamare la thumbnails nel mio tema? ti basterà inserire questo codice dove vuoi farla apparire:
<?php the_post_thumbnail(); ?>
In tutti i casi vi consiglio di inserire un comodo controllo if per verificare se la thumb è’ presente, altrimenti l’effetto dell’immagine mancante non è certo il top da vedere. Ecco il codice per effettuare il controllo:
<?php
if ( has_post_thumbnail() ) {
// il post ha l'immagine in evidenza (copia incolla il codice per far apparire la thumb qui)
} else {
// il post non ha l'immagine in evidenza
}
?>
Creare delle misure thumb personalizzate (e differenti) da poter usare nel tema
Molte volte può capitare di avere l’esigenza di creare una dimensione personalizzata alle nostre immagini in evidenza, ad esempio potremmo voler visualizzare più grande l’immagine nella “vista singola” dell’articolo e un po’ più piccola invece nella “lista articoli” tipica delle categorie. Ecco come fare.
Codice da inserire nel tuo functions.php
add_image_size( 'single-post-thumbnail', 400, 9999 ); //immagine in evidenza per l'articolo singolo add_image_size( 'loop-post-thumbnail', 400, 9999 ); // immagine in evidenza per il loop generale (categoria, archivi etc).
NOTA: Lasciando 9999 si dice a WordPress di settare la larghezza fissa e altezza proporzionale (non ho usato l’hard crop). Per richiamare la thumb appena creata facciamo così:
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
Questo shortcode creerà un’immagine con relativa classe stilizzabile:
.attachment-single-post-thumbnail{}
.attachment-loop-post-thumbnail{}
Facile no? =) Grazie a questo metodo potete facilmente eliminare (o limitare) l’uso di tool esterni come timthumb che oltre ad essere pericolose (ricordiamo tutti il security hack di poco tempo fa!), sono anche più lente in quanto elaborano le immagini on-fly tramite cache.
NOTA: in alcuni casi (sopratutto in server remoti) per vedere le modifiche dovrete installare e far partire questo noto plugin: Regenerate Thumbnails altrimenti potreste non vedere le modifiche effettuate.
Ti è piaciuto l’articolo? Condividilo sui tuoi social network preferiti! Enjoy Targetweb!
Lo sapevi che… sto cercando ragazzi giovani e volenterosi come me per uno progetto dedicato a WordPress, se vuoi saperne di più contattami!
Bravo Riccardo, Ottimo Articolo 😀
Grazie Ciro è sempre un piacere vederti sul blog 😉
Capita a fagiolo.. pensavo che non si potessero modificare.
Ciao,
il mio problema si presenta quando voglio togliere il “true” dalla riga add_image_size, ti ho preso il codice dall’inizio per farti vadere:
<?php
/*
Theme Name: Exciter
Theme URI: http://www.izithemes.com/themes/exciter/
Description: 2 columns Magazine/Blog theme by IziThemes.com
Author: IziThemes
Author URI: http://www.izithemes.com
Version: 1.0
*/
// Add post thumbnail functionality
add_theme_support(‘post-thumbnails’, array(‘post’));
add_image_size(‘thumb-large’, 610, 250, true);
add_image_size(‘thumb-medium’, 130, 90, true);
add_image_size(‘thumb-small’, 60, 60, true);
In quel momento dopo averlo tolto, salvo e mi si blocca il server con schermata bianca e non va più nulla, lo uso in remoto con Mamp x Mac, lo ha fatto con un altro template simile, mentre se ripristino il valore true ritorna normale, quale può essere il problema?
Grazie
Non saprei sei in locale?
Ciao,
sì sono in locale, sto provando il template, adesso ho comprato lo stesso template aggiornato, ma alla fine come si usa “imposta immagine in evidenza di wordpress” che qualsiasi immagine che io gli carico di varie dimensioni e la imposto come immagine in evidenza mi viene tagliata o distorta (come nell’articolo) alla stessa maniera, vedi esempio
http://i638.photobucket.com/albums/uu110/z-Traxx/Album3/Hompage.png
http://i638.photobucket.com/albums/uu110/z-Traxx/Album3/Article.png
io volevo usare per esempio un’immagine unica da 1024×800 in modo che nell’articolo quando cliccavi sulla lente si ingrandiva a dimensione reale grande e questo lo fa, ma sull’articolo prima di ingrandirla mi rimane distorta nel riquadro come vedi nella seconda foto, nella homepage poi nelle thumbnail sono tutte tagliate e non proporzionate al riquadro (foto 1) come anche nel featured image grande, secondo te come faccio a risolvere questo problema?
Grazie ciao
Salve
Ieri sera stavo aggiungendo articoli al sito di un mio amico, composti sa una serie si immagini, poi davo all’articolo FORMATO GALLERIA di modo che sulla home vedevo gli articoli con un anteprima di essi (immagine quadrata e testo nel caso ci fosse). Ad un certo punto questa anteprima non appare più ma appare solamente il titolo del post. Ho provato sul mio blog a fare lo stesso tipo di post e qui funziona. Il sito utilizza wordpress Versione 3.4.2 con tem twenty ten. Il sito in questione è http://www.cosimofrezzolini.com come potete notare l’ultimo articolo non ha nessuna anteprima. Potete aiutarmi? Grazie
ciao ma le immagini le carhi ? cioe’ non fai copia e incolli l’url? prova ha caricarle nella libreria media del panello
Ciao, come posso fare per aggiungere una classe personalizzata a tutte le immagini del sito in automatico quando vengono inserite nei post e nelle pagine? Puoi darmi un consiglio? Ho provato a creare un array con all’interno la classe ma continua a darmi quella predefinita “thumbnail”. Forse dovrei applicarla al tag img?
Grazie in anticipo e comunque bell’articolo chiaro e con gli esempi 😀
Ciao, sto cercando di inserire in HOME PAGE il post con immagine ma non c’è verso
Mi potete aiutare? Io non sono molto esperto.
LA function.php per è già abilitata a trattare thumbnail ma nella home page non sò dove inserire l’istruzione
Ho provato a mettaerla nel loo_single.php e ha funzionato se vado a visualizzare il post, ma nella home non riesco a farla uscire. Il tema che ho utilizzato è il Twentyten
Vi ringrazio
anche io ho lo stesso problema…se qualcuno può aiutarci sarebbe fantastico…
grazie mille!!1
Salve ho un sito in worpress,ma ho un problema le foto ogni articolo ha una foto dai pixel diversi difficile trovare foto tutte della stesso argomento e stessi pixel ,che tipo di programma plugin esiste affinché quando inserisco una foto si ridimensioni in automatico?Programmando per tutte lo stesso pixel?
Grazie
Salve, mi chiedevo se è possibile impostare l’allineamento diverso per ciascun immagine.
Attualmente, vengono tutte posizionate a sinistra del testo, ma io vorrei che, per esempio, per i post protetti l’immagine risultasse al centro.
E’ possibile?
Grazie
ciao complimenti per il blog vorrei sapere come fare per le immagini del mio sito ,, mi spiego ho tutte le immagini caricate normalmente ma siccome devo cambiare tmplete e il nuovo tema supporta le immagini in evidenza come posso fare per far si che il nuovo tema mi faccia vedere le immagini in immagini in evidenza senza dover modificare tutti i post che sono oltre 3,000 post con locandina? grazie in anticipo il mio sito e’ ..http://filmstreamingonline.altervista.org e il nuovo templete che vorrei utilizzare e’ il seguente :http://www.insertcart.com/optimize