WordPress 2.9: Post Thumbnail Images

La versione 2.9 di WordPress offre una nuova funzione grazie alla quale sarà  possibile inserire delle miniature (thumbnail) negli articoli/pagine senza piú l’obbligo di utilizzare i Campi Personalizzati. Affinché questa opzione sia disponibile, sarà  per il momento necessario aggiungere alcune righe di codice ai file del proprio tema in uso.

Sebbene l’operazione in sé non sia particolarmente difficoltosa, capita spesso che una buona parte degli utenti abbia una comprensibile reazione di smarrimento qualora decidesse di modificare per la prima volta un file del template.
Questo tutorial é dedicato a quei coraggiosi che ne hanno l’intenzione…

Accordiamo il tema alla nuova funzione (!)

Un aspetto particolarmente importante dell’intera operazione concerne l’avere le idee ben chiare in merito a cosa si stia effettivamente facendo: di fatto, dovremo informare il nostro tema circa la nuova funzione.°  La modifica può essere effettuata in due modi (esegui il backup del file originale prima di procedere):

  1. Bacheca/Aspetto/Editor nella sezione “Modifica temi” selezioniamo il file functions.php (Funzioni tema)
  2. apriamo con un editor di testo – del tipo Notepad++ ad esempio – il file functions.php

ed inseriamo in esso la seguente riga di codice facendo molta attenzione che il codice venga copiato almeno una riga sopra la chiusura ?>

add_theme_support( 'post-thumbnails' );

Ad operazione compiuta, salvare le modifiche al file. Nel caso in cui si abbia utilizzato un editor di testo, caricare il file (via FTP) sostituendo quello omonimo allocato nella cartella del tema.

Qualora avessimo effettuato correttamente le modifiche al file, nella barra laterale destra dell’editor di WordPress (articoli e pagine) apparirà  un nuovo widget a nome “Miniatura articolo” con un link testuale per potere accedere alle impostazioni per le immagini.

Approfondimenti (!)

Grazie alla modifica apportata al file functions.php, il nostro tema potrà  mostrare le miniature tanto negli articoli quanto nelle pagine del nostro sito.

Qualora si avesse la necessità  di includere le thumbnail nei soli articoli (escludendone la visualizzazione nelle pagine) sarà  necessario sostituire il codice suggerito nel passo precedente con:

add_theme_support( 'post-thumbnails', array( 'post' ) );

nel caso inverso, ossia l’includere le thumbnail nelle sole pagine (escludendone la visualizzazione negli articoli) sarà  necessario sostituire il codice suggerito nel passo precedente con:

add_theme_support( 'post-thumbnails', array( 'page' ) );

Dimensione delle miniature (!)

La nuova funzione offre inoltre la possibilità  di impostare una dimensione predefinita per le thumbnail. Questa operazione sarà  disponibile con due opzioni di scelta via:

  1. box-resizing: ridimensionamento proporzionato. L’immagine verrà  adattata al box definito nei parametri senza alcuna distorsione in modo tale che il contenuto venga mostrato nella sua interezza. Ad esempio, con una immagine originale dalle dimensioni di 100×50 pixel ed un box impostato a 50×50, il prodotto del ridimensionamento del file sarà  una miniatura di dimensione pari a 50x25px.
  2. hard-cropping: ritaglio. L’immagine dovrà  rispettare i parametri impostati in modo tale che il contenuto si adatti esattamente ad essi. Ad esempio, con una immagine originale dalle dimensioni di 100×100 pixel ed un box impostato a 50×50, il prodotto finale sarà  una miniatura (ritagliata) di dimensione pari a 50x50px.

Anche in questo caso, sarà  necessario aggiungere una riga di codice:

box-resizing

set_post_thumbnail_size( 50, 50 );

hard-cropping

set_post_thumbnail_size( 50, 50, true );

ad esempio, volessimo utilizzare l’hard-cropping, dovremo aggiungere il codice a quello precedente in questo modo:

add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 100, 50, true );

Funzioni tema (!)

Affinché il risultato del nostro lavoro possa essere visualizzabile, sarà  necessario inserire la funzione has_post_thumbnail() nel loop del tema in uso

<?php
if ( has_post_thumbnail() ) {
	// the current post has a thumbnail
} else {
	// the current post lacks a thumbnail
}
?>

inoltre, andrà  inserito nel Loop anche l’output (Post Thumbnail) per la funzione the_post_thumbnail()

<?php the_post_thumbnail(); ?>

Personalizzazione (!)

Qualora si desiderasse utilizzare una immagine (hard-cropped) 100x100px per la homepage ed una immagine con la larghezza pari ad 800 pixel (con altezza illimitata) per l’articolo, sarà  necessario aggiungere questo codice al file functions.php del tema:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true ); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 800, 9999 ); // Permalink thumbnail size

nonché inserire questo codice nel loop del file home.php o index.php (a seconda della struttura del tema):

<?php the_post_thumbnail(); ?>

e infine questo codice nel file single.php (nel Loop)

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

L´articolo che hai appena letto vuole essere un cordiale invito a familiarizzare con la nuova funzione di WordPress, un´occasione in piú per provare a se stessi che effettuare alcune modifiche al proprio tema non sia poi così difficoltoso. Per chi fosse interessato ad approfondire l´argomento, suggerisco il consulto di questi articoli che sono di certo piú dettagliati e migliori del mio:

Mark on WordPress | New in WordPress 2.9: Post Thumbnail Images

Justin Tadlock | Everything you need to know about WordPress 2.9´s post image feature

Matthias Kretschmann | Using The New Post Thumbnail Feature In WordPress 2.9

Commenti

  1. scrive

    Ciao Gianni,
    ora va tutto ok… avevo modificato manualmente il template… ma ora ho ripreso tutto…
    Grazie come sempre!
    A presto, Andrea

  2. scrive

    Ciao Andrea, pare che il tuo sito funzioni (IE8)…

    avevi forse modificato manualmente il template del tema? oppure hai solamente rimosso qualche elemento dalla sidebar?

  3. scrive

    Ciao Gianni,

    ho provato a disattivare NextGEN Gallery ed anche Light Box ma non succede nulla….

    Sembra strano, mi sembra che dipenda dalle dimensioni della Sidebar!

    Andrea

  4. scrive

    Ciao Andrea,
    la versione dimostrativa online del tema Arras funziona correttamente sotto IE 8 (vedi QUI). Prova a disattivare momentaneamente il plugin NextGEN Gallery e vedi cosa accade.

    Gianni

    PS
    ti ricordo che anche un’eventuale modifica (manuale, via plugin, etc.) dei file originali del “tuo” Arras può concorrere al problema di visualizzazione.

  5. scrive

    Ciao Gianni,
    volevo domandarti una cosa…. ho letto che il tema Arras è compatibile anche con Internet Explorer, ma ho provato a visualizzarlo sul browser e mi dà problemi, mentre su Firefox, per esempio, è tutto ok.
    Vorrei risolvere questa cosa per il semplice fatto che la maggior parte degli utenti usano, purtroppo, IE. Hai dei suggerimenti da darmi?
    Grazie infinite come sempre
    andrea

  6. scrive

    Ciao Tiziana,
    potresti aggiungere al tuo tema una funzione che estragga da ogni articolo la prima immagine disponibile ed utilizzarla come “miniatura” (vedi qui come fare).
    Prima di procedere, effettua il backup dei file che andrai a modificare!!! ;-)

    Gianni

  7. Tiziana scrive

    Ciao,
    grazie per il consiglio ma nessuno dei plugin che ho provato fa al caso mio. Aggiornarli uno ad uno sarebbe troppo complicato (sono oltre 500 articoli :S ). Non ci sono funzioni, codici che possono prelevare automaticamente le vecchie immagini e metterle come “Immagini in evidenza”. Spero tu possa aiutarmi. Grazie

    Tiziana

  8. scrive

    Semplicemente Grazie…. non sò perchè, ma vado a trovare sempre la soluzione più difficile, quanto poi è semplice

    Buone cose,
    Andrea

  9. scrive

    Ciao Gianni,
    non per avere fretta… potresti rispondermi alla mia domanda?

    Scusami per il disturbo e grazie in anticipo!

    Andrea

    • scrive

      Ciao Andrea,

      1. Bacheca/Aspetto/Menu
      2. crea un menu con le pagine che desideri appaiano nella barra di navigazione (dagli un nome e salva)
      3. nella sezione “Posizione dei temi” alla voce “Main Menu” seleziona dal menu a cascata il menu che hai creato al passo #2 (salva)

  10. Tiziana scrive

    Ciao Gianni,
    grazie per la tua guida davvero utile. Volevo chiederti c’è un modo per adattare automaticamente la nuova funzione anche ai precedenti post in cui le thumbnail erano gestitie tramite campi personalizzati oppure devo manualmente aggiungere le thumbnail per tutti i vecchi post? Spero tu potrai aiutarmi, grazie in anticipo di tutto

    Tiziana

    • scrive

      Ciao Tiziana, grazie a te per la tua cortese visita! :-)
      Il plugin Auto Post Thumbnail potrebbe parzialmente venirti incontro comunque, sebbene qui tu possa trovare un ricco elenco di plugin correlati alle miniature (attenzione alla compatibilità con la tua versione in uso di WP!), la soluzione migliore (a mio modestissimo parere) sarebbe quella di effettuare manualmente l’aggiornamento… sempre che tu non abbia pubblicato un mezzo trilione di post ;-)

      I plugin sono come gli antibiotici: meglio utilizzarli in caso di effettiva e comprovata necessità… :-)

      Gianni

  11. scrive

    Ciao Gianni,
    ascolta io ho letto le informative sul FOrum… mi dice di modificare in header.php:

    wp_list_categories(‘number=11&hierarchical=1&orderby=id&hide_empty=1&title_li=’);
    with this con questo

    wp_list_pages(‘title_li=&depth=4&sort_column=menu_order’);

    Ma non succede nulla! Devo settare qualche parametro?

    Un abbraccio

    Andrea

  12. scrive

    Ciao Andrea, tutto ok grazie! Tu? Spero bene ;-)
    Mi spiace per il tuo vecchio sito!!!

    Circa il menu della barra di navigazione di Arras, QUI trovi come risolvere il problema :-)

    Un abbraccio

    Gianni

  13. scrive

    Gianni ecco fatto… sono riuscito a far visualizzare il tutto… saltavo l’opzione di “associazione immagine”….

    L’unico dubbio resta far visualizzare il “menù pagine” anzichè “menù categorie”

    Grazie ancora

  14. scrive

    Ciao Gianni,
    sono Andrea come stai? E’ molto che non passo….
    Il mio vecchio sito… per un errore mio è stato cancellato (avevo il tema Mystique)…. ed allora ho provato a recuperare alcuni articoli scritti…
    Ho impostato il tema Arras… lo trovo molto carino, ma su alcune cose sto ammattendo….
    COme mai non tutti i Post Thumbnail Images vengono visualizzati? Faccio la procedura che hai elencato sopra ad un altro utente, in cui deve essere inserito il nuovo campo “thumbs” e l’url della foto…. su alcune mi viene visualizzato e su altri no…. grrrrrrrrr
    Eppure nelle impostazioni della bacheca ho dato la spunta a “tutti gli articoli”… Come mai?
    Un’ultima cosa…. invece di far visualizzare il “menù” Categorie, come posso inserire il “menù pagine” sempre in alto sotto il titolo?
    Grazie come sempre… Un abbraccio!

  15. Mariaginetta scrive

    Grazie Gianni,
    il tuo articolo mi è stato di vero aiuto…finalmente sono riuscita ad attivare la funzione senza problemi. :-D

    Grazie ancora,
    Mariaginetta

  16. scrive

    Ciao Fabio, mi spiace. Non mi pare che ci sia un qualche plugin che effettui l’operazione da te richiesta.
    Potrei comunque sbagliarmi! Trovassi una qualche soluzione, aggiornerò questo commento.
    Nel frattempo, prova ad aprire un thread in merito nel forum di WordPress Italia ;-)

    Gianni

  17. scrive

    ciao Gidibao io vorrei automatizzare l’importazione di tanti post tipo 500 quindi vorrei cercare una procedura automatica per far comparire le miniature, sai per caso qualche metodo per far diventare un immagine in evidenza tramite qualche classe o id o qualche opzione nei css.

    grazie ancora Fabio

  18. scrive

    Ciao Fabio, una volta importato gli articoli hai associato ad ogniuno di essi un file immagine (miniatura) assegnandolo -una volta caricato- come “immagine in evidenza” (vedi qui)? Ad operazione avvenuta dovresti vedere l’immagine in anteprima in un widget dell’editor di testo (vedi qui)

  19. scrive

    ciao ragazzi sto impazzendo con il tema ARRAS e le sue thumbnail, ho visto che sopra se n’è parlato ampiamente spiego la mia situazione:
    se aggiungo un articolo usando il back-end di wordpress funziona tutto e visualizzo le miniature nella home,
    il mio problema è che voglio aggiungere dei post importando file RSS e i post si aggiungono ma i thumbnail non si visualizzano anche se le immagini le ho uplodate per sicurezza e quando apro il post si visualizzano ma nella home no.

    cosa posso fare?? ho controllato la cache nella cartella library di Arras ma è sempre vuota. le ho provate tutte anche con i tag thumb e url

    grazie mille Fabio

  20. scrive

    Ciao gianluca, grazie.

    Per potere ottenere l’URL di una immagine (con Firefox), fai scorrere il puntatore del mouse sulla immagine, premi il tasto dx del mouse e clicca su “Copia indirizzo immagine” mentre con IE (che i Gormiti lo fulminino!), fai scorrere il puntatore del mouse sulla immagine, premi il tasto dx del mouse quindi, clicca su “Prorpietà” e nella finestra di popup che apparirà copia l’indirizzo alla voce a nome “Indirizzo (URL):”.

  21. gianluca scrive

    Ottimo articolo mi associo…
    volevo chiedere un consiglio si puo, recuperare solo url link del immagine inserita come miniatura articolo? dovrei utilizzarla per inserirla in una galleria, un post per ogni immagine della gallery inserita nei post cme miniatura…
    tipo: ” non ho idea come si estrae l’url del thumbnail.. ?!!!

  22. scrive

    Ciao Ciccio,

    apri il file functions.php e trova

    add_action( 'wp_head', 'p2_hidden_sidebar_css' );

    vai una riga sotto ed aggiungi questa funzione (quindi, salva):

    add_theme_support( 'post-thumbnails' );

    Ad operazione compiuta, avrai disponibile nell’editor la nuova funzione “Immagine in evidenza” e potrai caricare per ogni articolo/pagina una miniatura di riferimento ;-)

    PS
    il test l’ho effettuato sotto WP 3.0 e con P2 versione 1.1.5

  23. Ciccio scrive

    oh finalmente un articolo che spiega come fare. Complimenti

    Sai che però non trovo l’inizio del loop.. si trova nell’index giusto ?

    ho il tema p2 e non c’è tutto ciò >>

    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

    puo iniziare in un altro modo anche ??

    Grazie :P

  24. Gerson scrive

    Ciao Gianni, ti annuncio con piacere che effettivamente l’ho testato on-line e funziona! Accidenti quanto tempo perso per nulla! Peccato però non poter verificare i progressi in locale!
    Ancora grazie mille, ritienimi a disposizione eventualmente come tester per il futuro! ;)

    • Gerson scrive

      Ultimo problema: trasportare ogni volta da locale a on-line per vedere effettuate le modifiche. Quali sono i file/cartelle da aggiornare? Io, sovrascrivendo solo wp_content, ottengo ancora il sito vergine come avessi installato appena ora…

      • scrive

        Come tu ben scrivi, il sovrascrivere la cartella /wp_content non sortirà  alcun effetto. Per potere trasferire i dati da un sito locale ad uno online si dovrà  necessariamente aggiornare il database WP appartenente al sito online.

        Per quanto concerne i plugin, l’operazione sarà  relativamente semplice…
        I plugin generano (se necessario ed a discrezione dello sviluppatore) una o pi๠tabelle nel database al momento della loro attivazione. Tutti i dati personalizzati (le modifiche che tu stesso hai apportato) verranno allocate nella corrispondente tabella (oppure nelle tabelle a seconda del caso).

        Circa i temi, il discorso si complica: a differenza dei plugin, i temi non possono creare delle tabelle (regola imposta da WordPress) quindi, tutti i dati relativi alle personalizzazioni vengono generalmente salvati nella tabella a nome “wp_options”.

        Personalmente, credo che la soluzione migliore sia quella di armarsi di un po’ di pazienza e (ri)effettuare manualmente le personalizzazioni sul sito online utilizzando come riferimento quelle utilizzate in locale…

  25. Gerson scrive

    Ciao Gianni, grazie a te per l’attenzione! ;)

    Parliamo di Arras, che ritengo un ottimo tema: purtroppo non riesco a visualizzare i thumbnails (ma mi succede con un po’ tutti i temi affini). Seguendo il tutorial indicatomi passo passo, infatti, quello che visualizzo poi ਠun quadrato nero, con in alto a destra il titoletto del post blu con link, e al centro il simbolino multicolor che appare quando non si carica una immagine.
    Eppure, credimi, le ho provate tutte: non so quale problema di fondo possa esserci…

    • scrive

      Ciao Gerson,

      prego… di nulla! :-)

      Giusto un esempio:

      voglio realizzare un nuovo articolo con “Arras” quindi vado nell’editor e come prima cosa carico un file immagine che desidero sia la thumbnail che lo rappresenterà  (thumbnail articolo Arras, non miniatura WordPress!).

      Una volta caricato il file, ottengo l’URL (il percorso assoluto al file immagine).

      Ora, vado nei campi personalizzati e ne creo uno nuovo cliccando sul link “Aggiungere nuovo”. Ad operazione compiuta, inserisco “thumb” (senza le virgolette) nel campo “Nome” e l’URL alla immagine nel campo “Valore” quindi, salvo la bozza.

      Questa é la procedura per associare la miniatura di Arras ad un articolo. Hai fatto così?

      Inoltre, sotto Bacheca/Arras Theme/Theme Options nella sezione “Categories” hai selezionato dal menu a cascata le tre categorie necessarie? per:

      1. Featured Category #1

      2. Featured Category #2

      3. News Category

      Eventualmente, seleziona e salva. Ricordati che affinché le “miniature Arras” per gli articoli possano essere visualizzate, dovranno appartenere necessariamente a quegli articoli associati alle categorie che avrai indicato qui sopra. Infine, controlla le impostazioni nella sezione “Layout”: come punto di partenza, le predefinite dovrebbero andare bene.

      Fammi sapere…

      Gianni

      • Gerson scrive

        Ciao Gianni,

        allora direi che la procedura di aggiunta thumbnails ਠchiara, ripetuta spesso, oserei dire correttamente, ma nulla. Così come i Theme Options, avendo selezionato per i tre punti da te indicati “All categories” (ho provato anche a specificarne una ma nisba). Il layout ਠinvariato; quindi concluderei che il problema ਠaltrove. Ho controllato anche se le immagini sono state caricate correttamente, ed effettivamente così à¨. Ho sentito parlare di CHMOD 777 ma non ho idea di cosa sia e di come si debba modificare e se abbia effettivamente effetti validi. Se può servire alla diagnosi, si sappia che sto lavorando in locale…

        Il giallo si infittisce…quanta pazienza! Mi spiace quasi disturbarti a sto modo!

        Gerson

        • scrive

          Ciao Gerson,

          nessun disturbo! ;-)

          Sì, potrebbe dipendere dal fatto che tu stia lavorando in locale… hai la possibilità  di testare online il tuo nuovo sito? In teoria, dovrebbe funzionare!

  26. Gerson scrive

    Ciao Gianni,

    ho effettuato la prova che mi avevi consigliato e il risultato ਠstato positivo: grazie mille! Ora voglio smanettare anche sugli altri temi e capire se c’ਠerrore mio o non supportazione del tema: per te qual ਠdelle due? C’ਠuna differenza però fra questo tuo tema e i miei: che i miei hanno i thumbnails che vanno a scorrimento, non so se mi sono spiegato e se c’entra.
    Comunque, già  per questo, grazie mille!
    P.s: sarebbe interessante penso per tutti capire quali temi supportano e quali no…

    • scrive

      Ciao Gerson,

      grazie per il test ;-)

      Nei commenti precedenti hai citato due temi stile “Magazine”: Arras e Swift. L’architettura di questi due temi é già  strutturata per i “featured posts”, per le thumbnails, etc.
      Ho installato i due temi ed in entrambe i casi (WordPress 2.9.1), la funzione “post thumbnail” di WordPress é attiva. Forse, il tuo problema con le miniature non é relativo alla funzione di WP ma al fatto che i due temi necessitano l’inserimento delle miniature attraverso i campi personalizzati indipendentemente dal fatto che la funzione di WordPress sia attiva oppure no. In altri termini, caricare la miniatura con la funzione di WP non avrà  alcun effetto sul tema.
      Ad esempio, per potere aggiungere la miniatura ad un articolo con il tema “Arras” dovrai creare (per ogni articolo) un nuovo campo personalizzato attibuendo “thumb” a “nome” e l’indirizzo alla immagine per il “valore” (vedi esempio).

      Fammi sapere…

  27. Gerson scrive

    Ciao Gidibao…ma francamente non so se sia una questione di tema…ne ho provati due…swift e soprattutto arras…e non c’ਠmai verso…credo di fare qualche errore di fondo in quando i thumbnails non mi funzionavano nemmeno prima di leggere la tua guida…ma non so quale…
    Ti ringrazio infinitamente per l’attenzione e la gentilezza, sperando di riuscire insieme a risolvere il problema!

    • scrive

      Ciao Gerson,

      ora ti invito a scaricare ed installare un tema già  compatibile con le “Post Thumbnail Images” così potrai verificare in prima persona se il problema dipende dai temi che hai utilizzato oppure da altro.

      Il tema é quello che utilizzo io: Atahualpa. Scarica la versione 3.4.5.1 da qui.

      Fammi sapere…

      Gianni ;-)

  28. Gerson scrive

    Buongiorno a tutti,

    ho letto questa utile guida ma non riesco ancora a visualizzare i thumbnails (sto lavorando in locale). Il passo che non capisco molto ਠquello “Loop”, ovvero come e dove inserire quei codici, in quanto per ora, postandoli dopo questo:

    Uno dietro l’altro, quindi:

    Non ottengo risultati apprezzabili. Qualcuno saprebbe darmi una mano, per favore? Vi ringrazio dell’attenzione, a presto!

  29. scrive

    ciao gianni

    era ora che si decidessero a farci lavorare di meno, specialmente per i neofiti come me.
    grazie per la dritta

    colgo l’occasione per dirti che dopo un anno sono riuscito finalmente a mettere su il sito, grazie ai tuoi ed altrui consigli, (ma che fatica) se puoi mi piacerebbe avere un tuo parere.

    grazie e ciao
    Antonio

    • scrive

      Ciao antonio,

      che dire… hai fatto un ottimo lavoro!!!

      Grazie Antonio! Sono molto lieto che il mio lavoro sia stato utile alla nascita del tuo sito. Complimenti sinceri per lo stile originale ed elegante con il quale hai creato e realizzato il sito: tutto merito tuo!!! ;-)

      Happy Blogging

      Gianni :-)

  30. elisa scrive

    Ottimo articolo…ma ho qualche problemino.
    Su alcuni blog che ho con tophost tutto ok.
    Mentre su un altro server, che ਠdell’azienda che mi ha passato il lavoro, riesco a vedere il box dell’inserimento thumb, riesco ad inserirle, ma quando salvo l’articolo ottengo una pagina bianca e devo rifare il login per rientrare in wordpress :( !
    P.s su Chorome non vedo neanche il box delle thumb! e su IE non entro pi๠in amministrazione:(!
    Grazie per l’attenzione!

    • scrive

      Ciao elisa,

      il server aziendale gira su Apache (versione PHP…) oppure no?

      I problemi con Chrome ed IE (quale versione?) si verificano solamente con il sito allocato nel server aziendale oppure é esteso a tutti?

      Fammi sapere…

      Prego, di nulla! Grazie a te per i complimenti :-)

    • scrive

      Ciao Max,

      non conosco il tuo tema…

      in genere, il Loop ha inizio con:

      <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>

      effettua il backup del tuo tema ed inserisci le righe di codice suggerite nell’articolo qui sopra facendo qualche tentativo.

      Fammi sapere…

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *