Giocare con le Anteprime dei Vostri Post

scritto da Francesco Gavello [+] il 05 dicembre 2008 | 44 Commenti in: Blog Design | WordPress Plugins

Ci sono molti motivi per cui non dovreste ignorare l’utilità del gestire le anteprime dei vostri post.

Il più comune è cercare di veicolare l’utente più in profondità tra i vostri articoli proponendo degli spunti visivi interessanti sul quale fare click.

Forse potreste essere interessati a fornire una lista di post recenti o correlati, laddove i semplici link testuali potrebbero non accontentarvi più.

Ancora, una differente gestione di archivi e risultati di ricerca potrebbe essere la chiave vincente che state cercando.

In ogni caso, avrete bisogno di un buon modo di gestire le anteprime dei post di WordPress.

Un modo rapido, immediato e che vi consenta di lasciare immutate le vostre abitudini.
Ecco quindi per voi tre rapide e semplici soluzioni con le quali ottenere il vostro scopo :D

I plugin

Il metodo più logico, nonché quello da cui molti partono, è utilizzare uno dei moltissimi plugin messi a disposizione dalla community di WordPress. Al costo di funzionalità forse più “limitate” e concentrate spesso su un singolo obbiettivo, potrete ottenere buoni risultati con una manciata di click e senza nessuna conoscenza di HTML o PHP.

Alcune delle soluzioni più interessanti al momento comprendono:

  • WordPress Related Post with Thumb 0.1
    Rilasciato dall’italianissimo BoRnA sulla base del già famoso “WordPress Related Posts“, questo plugin vi permette di inserire una lista di post correlati con l’aggiunta della relativa anteprima generata automaticamente da WordPress (release 2.6 e superiori). In altre parole, lo attivate, inserite il codice nel vostro layout e vivete felici.
  • Thumbnail for Excerpts
    Altro “one click plugin”, Thumbnail for Excerpts fa esattamente quanto il nome promette. Si occupa di inserire l’anteprima del vostro post ogni qual volta ne viene mostrato l’excerpt in maniera totalmente automatica.
  • Get The Image WordPress Plugin
    Inizialmente potrà sembrarvi complicato, ma ciò che questo plugin fa è fornire due essenziali funzioni per recuperare dai vostri post le immagini contenute nei campi personalizzati (se esistono) oppure basandosi su quelle caricate tramite il media uploader. Fornisce interessanti opzioni di styling e pesa in tutto 6Kb. Da provare.

I campi personalizzati

Il secondo metodo è quello di sfruttare una feature di WordPress tanto utile quanto spesso dimenticata: i campi personalizzati.

Tramite i campi personalizzati possiamo associare ad ogni nostro articolo dei veri e propri “metadati” contenenti tutte le informazioni che desideriamo vadano a caratterizzarlo ulteriormente.

Quello che dovremo fare per per gestire le anteprime è procedere al fondo del pannello di composizione del post e, all’interno del box “Campi Personalizzati”, indicare una chiave ed un valore.

Non spaventatevi: una chiave non è nient’altro che il nome del campo con il quale ci riferiremo successivamente ad esso, e il valore il relativo contenuto al suo interno.

Inseriamo dunque come chiave “anteprima_post” e come valore il path diretto all’immagine da utilizzare come anteprima, nella forma “http://www.sitoweb.it/immagine_anteprima.jpg

Ora andiamo a mettere mano al nostro tema per recuperare queste informazioni.

< ?php $anteprima_post = get_post_meta($post->ID, 'post_anteprima', true ); ?>
<img src="<?php echo $anteprima_post ?/>" class="anteprima">

Sostanzialmente con queste due semplici righe di codice (da posizionare all’interno del Loop) stiamo andando a prelevare il campo personalizzato “post_anteprima” dal post sul quale ci troviamo, inserendolo nell’attributo SRC del tag IMG.

Possiamo inoltre associare le necessarie classi e attributi al tag IMG per personalizzare la resa dell’immagine una volta che questa è stata recuperata.

Nota: Non è assolutamente necessario creare un’anteprima separata e ricaricala sul vostro server ad ogni nuovo post. Potete utilizzare l’anteprima che WordPress dalla versione 2.6 in avanti genera in automatico, prelevando il path dal pannello di modifica attributi dell’immagine o direttamente da quelle presenti nella libreria media.

Le funzioni di WordPress

La terza soluzione comprende l’utilizzo delle funzioni native di WordPress.

Sappiamo che a partire dalla release 2.6 le nostre anteprime sono quindi già presenti sul server, generate automaticamente per ogni immagine caricata e ansiose di essere recuperate con il giusto codice.

Quello che fa al caso nostro, nella sua forma più banale, è:

<?php $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
$firstImageSrc = wp_get_attachment_image_src(array_shift(array_keys($images)));
echo "<img src=\"{$firstImageSrc[0]}\" width=\"125\" height=\"125\" />"; ?>

Tramite l’utilizzo di parametri su “get_children” creiamo un array “$images” e prendiamo la prima chiave di quest’ultimo per recuperare l’url che ci serve da “wp_get_attachment_src()”. Da notare che la dimensione dell’immagine viene stabilita da un banale resize via HTML e non va ad intaccare la reale dimensione in pixel del file.

Suona complicato ma in realtà tutto ciò che dovrete fare è piazzare questo frammento all’interno di un Loop per recuperare l’immagine associata al post sul quale vi trovate.

Update: Se invece volete predisporre un’immagine di default da utilizzare nel caso l’immagine non riesca ad essere recuperata dallo snippet poco sopra, eccone una versione leggermente migliorata.

<?php 

    $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );						

if ($images) {						

    $firstImageSrc = wp_get_attachment_image_src(array_shift(array_keys($images)));
    echo "<img src=\"{$firstImageSrc[0]}\"  />";									

} else {

    echo "<img src=\" URL_IMMAGINE_DEFAULT \" /> ";

} ?>

One More Thing. La soluzione “Pro”.

Ora che abbiamo visto le soluzioni basilari con le quali si può giocherellare con le anteprime dei post, vorrei proporvi un’applicazione pratica che combina le soluzioni due e tre per ottenere il seguente scopo: visualizzare automaticamente l’anteprima di un post se questo contiene almeno un’immagine, forzare la visualizzazione di una nostra anteprima nel caso quella autogenerata non ci soddisfi pienamente, tenendo conto di mantenere una certa retrocompatibilità sul layout nel caso il post non presenti affatto immagini.

Più semplice farlo che descriverlo :D

< ?php $anteprima_post = get_post_meta($post->ID, 'post_anteprima', true );
if ($anteprima_post) { ?>
	<a href="<?php the_permalink(); ?>">
		<img src="<?php echo $anteprima_post ?/>" class="anteprima">
	</a>
< ?php } else { ?>
	< ?php  $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
	if ($images) { 
		$firstImageSrc = wp_get_attachment_image_src(array_shift(array_keys($images))); ?>
			<a href="<?php the_permalink(); ?>">
				< ?php echo "<img src="{$firstImageSrc[0]}" class="anteprima" />"; ?>
			</a>
	< ?php }?>
< ?php }?>

Quello che ci serve è un ciclo IF-ElseIf in cui controlliamo inizialmente se esiste un campo personalizzato “anteprima_post” con il valore della nostra anteprima personalizzata.

Se questo ciclo fallisce (ergo non abbiamo indicato una nostra anteprima tramite campo personalizzato), allora procediamo a prelevare l’anteprima autogenerata da WordPress. Tra un’operazione e l’altra (giusto per rendere il codice più completo) procediamo a linkare l’anteprima al post stesso.

Ovviamente i codici sopra riportati si trovano nella loro forma, come detto, più essenziale.

Non dubito che qualcuno di voi più avanzato su PHP possa trovare altre soluzioni per ottenere lo stesso scopo, tuttavia per quanto ho potuto sperimentare fino ad oggi credo svolgano il loro lavoro in maniera rapida e pulita.

Avete mai pensato di implementare anteprime ai vostri post?

Usate alcune delle soluzioni qui presenti?

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

44 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. Andrea ha detto:

    Molto interessante, in particolare l’utilizzo dei campi personalizzati, per i quali non vedevo ancora un’applicazione che si adattasse alle mie esigenze, e la soluzione “pro”.

    Utilizzo post-thumb (http://www.alakhnor.com/post-thumb) e mi rendo conto ora che permette di fare sostanzialmente ciò che si può già fare in maniera semplice utilizzando le funzioni native di WP.

    Certo, post-thumb ha qualche feature aggiuntiva che potrebbe tornare utile a qualcuno, ma personalmente penso che risparmierò qualche Kb per utilizzare il codice nativo.

    Rispondi
  2. BoRnA ha detto:

    Io ho utilizzato questa opzione prima di fare il plugin:

    <img style=”margin-bottom:3px; width:94px;” src=”<?php bloginfo(‘url’); ?>/wp-content/uploads/
    <?php
    // this is where the custom field prints images for each Feature
    $values = get_post_custom_values(“thumb”); echo $values[0]; ?>” alt=”<?php the_title(); ?>” />

    In pratica sfrutto i campi personalizzati in cui metto solo il nome dell’immagine visto che ho impostato già la path sul codice. Se uno ha anhce la suddivisione per giorno, è cmq gestibile via codice.

    Credo sia molto più veloce questa soluzione e utilizzabile in molti moduli, come il blocco anteprime sul mio sito personale. In quel caso utilizzo due campi personalizzati: uno per la thumb e uno per la img più grande.

    Rispondi
  3. Francesco Gavello ha detto:

    Utilissimo BoRnA ;) Evita di dover andare a modificare i campi personalizzati in caso di spostamento del blog!

    E’ vero che ci sono ottimi plugin come “Search & Replace” che fanno il loro lavoro, ma meno si rischia meglio è :D

    Rispondi
  4. Andrea Pinti ha detto:

    Molto utile, avevo gia’ trovato una soluzione simile a una di quelle qui proposte basata sui custom fields, ma la tua soluzione PR0 mi stuzzica di più :D

    Rispondi
  5. David La Tache ha detto:

    grazie mille francesco! da ignorante quale sono in wordpress questo articolo mi tornerà utilissimo per ottimizzare il footer del sito! sempre ottimi consigli, complimenti!

    Rispondi
  6. Francesco Gavello ha detto:

    @David La Tache: D’altronde chi meglio di iShotPix ha bisogno di anteprime per le immagini dei post? :P

    Rispondi
  7. David La Tache ha detto:

    Eheheh, hai “ragionissima” Francesco! Proprio ieri sera abbiamo rispolverato i campi personalizzati per riunire tutte le gallerie fotografiche in un’unica pagina, una soluzione niente male perchè ci risolve in automatico un’operazione che avremmo dovuto realizzare ogni volta manualmente.

    Hai ridato un’occhiata al sito? Manca ancora tanto, ma man mano lo stiamo ottimizzando in modo da raggiungere la sua “forma” definitiva.

    Rispondi
  8. prostata ha detto:

    Post davvero esauriente e chiaro, complimenti!

    Rispondi
  9. BECA ha detto:

    io utilizzo i campi personalizzati. nella seconda parte della home faccio un resize di questi ultimi, grazie alla lettura di questo articolo :D

    Rispondi
  10. BECA ha detto:

    ps: su internet explorer non mi visualizza l’immagine, qualche idea? :(

    Rispondi
  11. Francesco Gavello ha detto:

    @Beca: Credo sia proprio colpa del resize; ci ho dato uno sguardo su FF con Firebug e su IE con la IE Developer Toolbar.

    Quello che sembra è che l’immagine su IE effettivamente sia presente, ma con altezza e larghezza di 1px (quindi praticamente invisibile).

    Come avviene il resize attualmente?

    Rispondi
  12. BECA ha detto:

    l’immagine di partenza è 400×100 mentre quella fina è di 260×65 ed utilizzo questo codice per farlo:

    ID, 'primopiano', $single = true); ?>
    <img src="" alt="" class="imgspcaer" width=\"260\" height=\"65\" />

    ne approfitto per farti un’altra domanda:
    per visualizzare le immagini con il testo accanto, quindi non sopra (come avviene ora), cosa devo inserire nel codice, o è solo questione di css?

    Rispondi
  13. BECA ha detto:

    ID, ‘primopiano’, $single = true); ?>
    <img src=”" alt=”" class=”imgspcaer” width=”260″ height=”65″ />

    Rispondi
  14. Francesco Gavello ha detto:

    @Beca: Da codice HTML, ciò che blocca l’immagine dall’essere visualizzata su IE sono le due “\” prima dei valori di height e width (che invalidano i parametri dell’elemento IMG).

    Se sei fuori dal codice PHP in quella porzione di template gli “\” prima degli apici non sono necessari.

    Probabilmente FF chiude un occhio, mentre IE decide di lasciar perdere e assegna 1px di dimensione ad entrambi i parametri.

    Per la questione dell’allineamento del testo accanto all’immagine è sufficiente impostare la proprietà float dell’immagine in questione su “left” o “right”.

    L’immagine in questo caso deve trovarsi (parlo a livello di codice) prima del testo stesso che la deve circondare.

    Occhio che questo potrebbe in alcuni portare il layout a “smontarsi”.
    Ti consiglio la lettura dell’ottimo articolo di HTML.it Float: teoria e pratica.

    Fammi sapere ;)

    Rispondi
  15. [...] Giocare con le Anteprime dei Vostri Post [...]

    Rispondi
  16. carlo ha detto:

    scusate… mi da questo errore, dove sbaglio?
    Parse error: syntax error, unexpected ‘{‘, expecting ‘,’ or ‘;’ in D:\Lavori\wp09\wp-content\themes\wp-web\archive.php on line 42

    (stò provando la terza versione)
    ID );
    $firstImageSrc = wp_get_attachment_image_src(array_shift(array_keys($images)));
    echo “”; ?>

    Rispondi
  17. carlo ha detto:

    Ora funziona, molto gentile!

    Rispondi
  18. carlo ha detto:

    Mi stavo chiedendo…. non è possibile fargli pescare un’immagine di default se non trova la thumbs in modo che così non dia errore nel caso non ci sia l’immagine?

    Rispondi
  19. carlo ha detto:

    Direi che ora è perfetto :-)

    Se mi serve della consulenza (anche a pagamento) posso contattarti?? :-)

    Rispondi
  20. carlo ha detto:

    Ne approfitto ancora… per linkare anche le thumb?
    forse a questo punto bisognerebbe valorizzare firstImageSrc e usare l’html normale inserendo <? … lo so nessuno mi ha capito!!! ;-)

    echo “<a href=” “><img src=”{$firstImageSrc[0]}”

    nell’a href volevo scrivere: “<?php the_permalink();?>”

    Rispondi
  21. carlo ha detto:

    io l’ho risolta in questo modo:

    if ($images) {
    $firstImageSrc = wp_get_attachment_image_src(array_shift(array_keys($images)));
    ?>
    <a href="<@? php the_permalink() ?>"/>
    <?php
    echo "<img src=’".$firstImageSrc[0]."’ /></a>";}

    Rispondi
  22. Fulvio ha detto:

    scusate la domanda da Gnubbo … ma che file va modificato per implementare le thumb e sfruttare le funzioni native di WP seguendo i due metodi indicati????

    grazie e scusate

    Rispondi
    • Francesco Gavello ha detto:

      Ciao Fulvio, puoi posizionare gli snippet di codice in qualsiasi file del tuo tema, purché all’interno di un LOOP. :)

      Nota che questo articolo, pur presentando tecniche ancora valide, si riferisce a metodi solitamente impiegati nelle versioni precedenti la 2.9 (che integra una gestione opzionale delle anteprime del tutto nuova ma non perfettamente retro-compatibile).

      Rispondi
      • Fulvio ha detto:

        Ok Grazie mille della risposta, cosa consigli di usare? ho provato con “wp thumbnail post”

        ma non so per quale assurdo motivo non mi carica le immagini, altri suggerimenti?
        Francesco il tuo sistema mi graba parecchio, lo vorrei mettere sul mio blogghettino :-) Ke-Bike.Com/Blog non ho pretese immense, nel senso che raggiungere l’eccellenza del tuo blog o altri tipo diplo etc.. per me è impensabile, per ora mi accontento di diffondere il verbo poi si vedrà :-)

        Grazie Francesco

        Buona giornata

      • Francesco Gavello ha detto:

        Sicuramente l’approccio a codice puro funziona perché è ciò che sto usando in questo momento proprio su questo blog. ;)

        Il plugin che citi tuttavia (e con molta probabilità) potrebbe non essere più compatibile con le ultime versioni di WordPress.

        Se non ti interessa applicare le anteprime anche ai post in archivio, ma solo a quelli futuri, puoi anche adottare la soluzione nativa di WordPress dalla 2.9+.

  23. Fulvio ha detto:

    Grazie Mille Francesco, Sei molto molto gentile, Provo a fare così.
    Ti/vi farò sapere se è successo un casino :-)

    Grazie e buona serata

    SyS

    Fulvio

    Rispondi
  24. Fulvio ha detto:

    Ciao Francesco, sono finalmente riuscito a implementare questo sistema di thumb. Purtroppo da gnubbo non sono bravissimo come voi.

    Altra domanda, come faccio a impostare un link al post nella thumb?

    per intenderci se vai nel mio blog: Ke-Bike.com/blog le thumb ocmpaiono e sono stra felice, ma le immagini non lincano al post, cosa che invece avviene nella tua home FrancescoGavello.it/

    Grazie del continuo disturbo
    Fulvio

    Rispondi
    • Francesco Gavello ha detto:

      Ciao Fulvio, per ottenere ciò che chiedi è sufficiente racchiudere il codice che ti genera l’immagine (assumendo tu abbia utilizzato gli snippet) tra i tag:

      < a href="< ?php the_permalink(); ?>“>

      e

      < /a>

      (ricordati di eliminare gli spazi extra che ho aggiunto prima delle parentesi angolari)

      Rispondi
  25. Davide192 ha detto:

    Il codice che sfrutta la funzione $image funziona alla grande anche con WP 2.9, molto meglio del the_post_thumbnail introdotto natio dalla 2.9.1 che non è retrocompatibile. Ottimo, grazie! ;)

    Rispondi
  26. [...] Giocare con le Anteprime dei Vostri Post [...]

    Rispondi
  27. Gregory ha detto:

    Ciao Francesco, ho inserito il codice da te descritto per visualizzare le miniature nel mio primo blog e funziona alla grande. Ora mi piacerebbe ingrandire la miniatura con lightbox. Ho installato il plugin lightbox-2 ma funziona solo con miniature inserite direttamente nel box di scrittura dell’articolo. Esiste un modo per fare ciò? Thank’s

    Rispondi
    • Francesco Gavello ha detto:

      Dipende da diversi fattori: lightbox alla base di tutto e nelle sue mille declinazioni ha bisogno di una struttura precisa su cui basarsi.

      Sicuramente esiste il modo, ma richiede che la struttura che punta all’immagine (link “a” e tag “img”) sia costruita in modo che lightbox (e non solo un suo plugin generico che si basa su assunti che possono non combaciare) sappia esattamente dove andare a lavorare.

      Rispondi
  28. Gregory ha detto:

    Grazie Francesco, anche se dopo svariate prove non sono riuscito ancora a venirne a capo…

    Rispondi
  29. Cinzia ha detto:

    Ciao Francesco,
    sto provando ad usare la soluzione Pro inserendola nel file loop.php.
    Il tuo codice aveva degli spazi tra “<?php" che ho sistemato correggendo tutto il codice cosi:

    ID, ‘post_anteprima’, true );
    if ($anteprima_post) { ?>
    <a href="”>
    <img src="” class=”anteprima” />

    ID );
    if ($images) {
    $firstImageSrc = wp_get_attachment_image_src(array_shift(array_keys($images))); ?>
    <a href="”>
    <?php echo "”; ?>

    Ma purtroppo facendo l’upload non mi mostra più nulla del blog.

    Mi sai dire gentilmente dove sbaglio? Grazie mille!

    Rispondi
  30. Francesco Gavello ha detto:

    Ciao Cinzia,
    gli spazi nel codice in alto sono inseriti dal plugin che uso per gestire questi embed. Purtroppo non è possibile inserire PHP nei commenti a meno di (appunto) separare i tag

    Il fatto che caricando un solo snippet venga bloccato il caricamento dell’intero blog mi fa supporre un qualche tipo di tag non chiuso, che fanno crollare a cascata un qualche ciclo condizionale. Difficile dirlo da qui purtroppo.

    Rispondi
  31. Cinzia ha detto:

    Ciao Francesco,
    ti ringrazio per la tua disponibilità.

    Il mio problema non penso sia dovuto ad un tag non chiuso. Perché non ho cambiato il tuo codice, ma ho solo tolto gli spazi.

    Ora sto cercando di risolvere con un plugin che mi sembra più semplice.

    Grazie ancora, saluti.

    Rispondi
  32. [...] Giocare con le Anteprime dei Vostri Post [...]

    Rispondi
  33. [...] in giro per la rete, e ovviamente dalla documentazione ufficiale di WordPress. Qualche credito: Giocare con le anteprime dei vostri post; Class Reference/WP Query; Trovare la categoria [...]

    Rispondi
  34. Fabio ha detto:

    Ciao
    mi chiamo Fabio e sto cercando di aiutare un’amica

    sito dell’amica
    http://jack1981.altervista.org/

    in questo articolo non riesco a trovare delle cose che mi servono per aiutare un’amica
    “non riesco a giustificare i post nella home…e neanke a modificare colori sfondo didascalia nella slide (dove c’è la foto); dal pannello di controllo nn si possono modificare e nel foglio css non riesco a trovare dove sn ste cose.”

    mi puoi dare una mano?
    Ciao
    Grazie

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!