Tutorial WordPress #4 : Estrarre immagine da post WordPress

di Redazione 2

In questo tutorial vedremo come estrarre la prima immagine da ogni post wordpress.
Questa è cosa molto facile grazie all’uso del php.

Inizio col dire che lo spunto è preso da questo articolo.
Effettivamente il processo è lo stesso, solo che nel link non viene effettuato il richiamo all’interno degli appositi tag ( oppure viene omessa questa parte fiduciosi di utenti esperti ).

La prima cosa da fare è creare una funzione da inserire nell’apposito file function.php della nostra template. Possiamo inserire il seguente codice prima dell’ultimo ?>

[sourcecode language=’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;
}
[/sourcecode]

Fatto questo andiamo dobbiamo aprire la pagina php dove ci interessa inserire l’immagine. Noi abbiamo optato per la pagina delle categorie, facendo uscire un immagine ad ogni post.

Il codice da inserire per effettuare il richiamo all’immagine è il seguente

[sourcecode language=’php’]

” />

[/sourcecode]

E’ stato racchiuso in un contenitore, ma non è necessario.

Stabilire una grandezza fissa per l’immagine estratta

L’aggiunta da fare sul codice è molto semplice.
Infatti basta sostituire questo codice :

[sourcecode language=’php’]

” />

[/sourcecode]

con il seguente :
[sourcecode language=’php’]

” />

[/sourcecode]

In poche parole aggiungiamo una classe css che ci permette di gestire altezza e larghezza dell’immagine estratta.

Vediamo il codice css :

[sourcecode language=’css’]
.thumb {
margin: 5px 0 10px;
padding: 4px;
border: 1px solid #eee;
line-height: 0;
}
.thumb:hover {
background: #1891D1;
border: 1px solid #1891D1;
}
.thumb img {
width: 260px;
height: 110px;
}

[/sourcecode]

Spero di esservi stato utile.

Commenti (2)

  1. Ciao, non riesco a far saltare fuori l’immagine di default. mi potete aiutare?

  2. mmm… allora questo articolo spiega come estrarre un immagine dal post ( anzi la prima ), per la default richiama un immagine che si chiama appunto default.jpg
    se ci link il sito cerchiamo di darti un aiuto

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>