Visualizzare Anteprima Immagini di un Articolo WordPress
Pubblicato nel 2009 da james in Blog, Design, WordPress | 11 commentilug 18
Esistono diverse scuole di pensiero riguardo al mostrare le anteprime delle immagini degli articoli in home page ma sicuramente ogni blogger si sta adeguando alle ottime funzionalita’ di WordPress che permette di rendere il proprio blog sempre piu’ personalizzabile.
Dunque mostrare le anteprime delle immagini inserite in un articolo di WordPress puo’ sembrare cosa semplicissima, in realta’ mi e’ costata due giorni di ricerca per verificare quale realmente desse i migliori vantaggi. Come detto, esistono diverse scuole di pensiero, che a prescindere dalle anteprime delle immagini, nell’usare meno plugin possibili, quindi se una funzione la si puo’ ricavare a “mano” smanettando nel codice php del tema risulta essere migliore perche’ saremo noi a modificare il sorgente e capire cosa abbiamo modificato, a differenza di un plugin che fa delle operazioni sul codice di solito a noi sconosciute.
Metodo senza plugin
Il metodo senza plugin prevede di modificare direttamente il template per ricavare la prima immagine di ogni articolo (e per mostrarla in output) e l’installazione di uno script per ridimensionare le immagini in thumbnail.
Per prima cosa dobbiamo inserire la seguente funzione, che recupera la prima immagine di un articolo WordPress, nella pagina del template functions.php tra i tag <?php e ?>
function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
}
return $first_img;
}
Dopo aver inserito il codice di qui sopra nel file functions.php del nostro template potremo usare il codice
<?php echo catch_that_image(); ?>
nel punto in cui vogliamo mostrare la prima immagine dell’articolo.
A questo punto pero’ il codice inserito mostrera’ l’immagine nelle dimensioni reali. Per ridimensionare l’immagine potremmo usare uno script semplice semplice:
creiamo un file thumb.php ed inseriamo il seguente codice:
<?php
$width=50;
$height=50;
$url=$_GET['url'];
$img=imagecreatefromjpeg($url);
$out=imagecreatetruecolor($width,$height);
imagecopyresized($out,$img,0,0,0,0,$width,$height,ImageSX($img),ImageSY($img));
imagejpeg($out);
imagedestroy($out);
?>
ovviamente al posto di width ed height possiamo inserire i valori da noi preferiti.
Per visualizzare l’anteprima dell’immagine in WordPress bastera’ inserire il seguente codice nel posto in cui desideraimo che sia visualizzata l’anteprima:
<img alt=”" src=”thumb.php?url=<?php echo catch_that_image(); ?>” />
Inoltre vi segnalo questi altri due script di ridimensionamento di immagini che offrono piu’ opzioni di personalizzazione:
Metodo con l’uso di plugin
Dei tanti plugin di creazione anteprima di immagini di WordPress che ho testato, il migliore per facilita’ di utilizzo e realizzazione dell’anteprima stessa e’ stato QF-GetThumb.
L’uso del plugin e’ semplicissimo: una volta averlo inserito nella cartella wp-content/plugins ed averlo attivato dal pannello admin di WordPress verra’ creata una nuova funzione nelle impostazioni, chiamata appunto QF-GetThumb Options. Le impostazioni da inserire sono:
- Domain name ———-> Inserire il nome del dominio (es. www.webbando.com);
- Full domain name —–> Inserire il nome completo del dominio (es. http:// www.webbando.com/);
- Document root ——–> Inserire il percorso della root del sito (es. /home/www/);
- Default image ——–> Inserire il percorso dell’immagine che volete visualizzare se il plugin non trova nessuna immagine nell’articolo (es. http://www.webbando.com/immagini/default.png);
- Save folder ———-> Inserire il nome della cartella dove si vogliono salvare le anteprime (es. thumb);
- Apend text ———–> Inserire il nome del prefisso delle anteprime create (es. thumb)
Una volta salvate le impostazioni (che comunque vengono inserite correttamente di default dal plugin), bastera’ inserire il codice
<?php echo the_qf_get_thumb_one(); ?>
nella posizione del tema dove si vuole visualizzare l’immagine dell’articolo.
Il codice da inserire e’ personalizzabile grazie alle seguenti variabili:
num : (default = 0)
width : (default = 0)
height : (default = 0)
global : (default = 0)
crop_w : (default = 0)
crop_h : (default = 0)
find : (default = â€)
Per maggiori dettagli leggi la FAQ ufficiale
Un altro plugin di creazione anteprima delle immagini che voglio segnalare e’ Post Thumb che ha grossomodo le stesse funzioni di QF-GetThumb, anche se pero’ e’ piu’ difficile da personalizzare.
Fonti Parziali (script recupero prima immagine articolo WP): Noiz Experience
“Ti e’ piaciuto l’articolo? Vuoi restare sempre aggiornato degli ultimi articoli inseriti iscriviti adesso ai Feed RSS di Webbando.
Per ricevere gli ultimi articoli direttamente alla tua posta iscriviti alla Newsletter di Webbando.”
COSA SONO I FEED? GUARDA IL VIDEO
11 commenti
Cercando di mettere mano al codice (ho inserito a fine foglio tra i tag ) non visualizzo più il sito e mi compare Parse error: syntax error, unexpected T_DEFAULT in C:\xampp\htdocs\miodb1\wp-content\themes\default\functions.php on line 439.
Se posso preferisco evitare plugin e mi piacerebbe scoprire perché non funziona!
Ma stai provando in locale WordPress? Comunque inserendo la funzione tra i tag di apertura e chiusura non dovrebbero esserci problemi. Puoi condividere il file magari con estenzione txt cosi posso darci un’occhiata?
Mi piacerebbe potessi darci un’occhiata, ma sono solo in locale..
Non riesci a mettere online un file txt contenente il contentuto del file functions.php del tuo template?
Come indicato nel post ho inserito in functions.php le righe:
<?php function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(’//i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
}
return $first_img;
} ?>
Allora, l’errore risulta essere in questa riga:
$first_img = $matches [1] [0];
Scusa ma ci sto sbattendo la testa!
Il codice da inserire e’
function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
}
return $first_img;
}
Copialo e incollalo prima dell’ultimo tag di chiusura di php contenuto nel file functions ?>
Se non va non saprei il perche’, a me funziona correttamente…
Ciao! volevo darti le novità: aver scritto e cancellato in function php. mi aveva incasinato un po’ la sintassi, perciò ho sovrascritto un nuovo foglio. Quindi ho reinserito il codice che mi hai lasciato sopra e stavolta nessun problema! Allora sono andata in index.php e lì ho aggiunto , ma non mi faceva vedere il thumb, al posto “scriveva” i dati dell’immagine. Allora ho sostituito in index con e così mi ha fatto vedere la thumb. Per curiosità sono andata in function e ho eliminato il codice appena inserito e ora vedo comunque la thumb associata all’articolo… a questo punto non ci capisco più niente!
nel post non si vedono alcune cose che ho scritto: in index avevo aggiunto echo catch the image, che poi ho sostituito con get the image
A quanto pare hai risolto, da quanto ho capito, con il plugin get the image.
Ho provato anche io ad inserire il codice in functions.php e ho lo stesso risultato di Gisella (sia in locale che su server), il sito non viene più visualizzato (schermata totalmente bianca e caricamento completato). Mentre appena tolgo il codice da functions.php tutto torna normale.
Ciao Stefano, che versione di WordPress hai installato?
Puoi mostrarmi il file functions.php che ti da problemi?
2 Trackback a Questo Articolo
Visualizzare Anteprima Immagini di un Articolo WordPress – The Facebook Newswp-popular.com » Blog Archive » Visualizzare Anteprima Immagini di un Articolo WordPress