Recuperare le immagini caricate in un Post

Quando scriviamo un Post in WordPress è possibile caricare delle immagini contestualmente alle stesura dell’articolo. Queste immagini, che fanno parte della libreria media, vengono associate a quel determinato post. La particolarità di questo comportamento risiede nella possibilità di estrarre queste immagini a prescindere se queste sono state inserite fisicamente all’interno del post. Tale procedimento, dunque, è molto più interessante rispetto all’uso dei campi personallizzati (custom fields) o di “incomprensibili” (per alcuni) regexp (regular expressions) all’interno del corpo del Post. Recentemente, inoltre, WordPress permette di inserire una semplice, tuttavia immediata, galleria, sfruttando propria questo legame tra post e immagine caricata. A basso livello le immagini caricate vengono trattate esattamente come un post, cioè la tabella sul database e i campi sono esattamente gli stessi.
Ad esempio se per un determinato post – con delle immagini caricate – usiamo il seguente codice:

1
2
3
4
5
6
// dove è $post_id è l'id del post
// se siamo in un loop possiamo usare $post-ID
$ai =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $post_id );
foreach($ai as $image) {
    echo '<p>' . $image->post_title . '</p>';
}

Otteniamo la lista dei titoli delle immagini caricate. Per visualizzare le immagini basta modificare l’output in:

1
echo '<p>' . $image->post_title . '<img src="' . $image->guid . '" /></p>';

Tuttavia è più corretto – per ragioni di compatibilità con futuri aggiornamenti – utilizzare le funzioni che WordPress mette a disposizione per recuperare l’url dell’immagine. Ad esempio possiamo visualizzare sia l’immagine in dimesioni reali che l’immagine in miniatura tramite:

1
2
3
echo '<p>' . $image->post_title .
    '<img src="' . wp_get_attachment_thumb_url( $image->ID ) . '" />' .
    '<img src="' . wp_get_attachment_url( $image->ID ) . '" /></p>';

Ordinamento

Negli esempi che abbiamo visto sopra le immagini vengono recuperate senza nessun ordine specifico, al massimo per ordine inverso di caricamento. Se avete mai provato ad usare la galleria di WordPress, vi sarete accorti che questa permette di ordinare le immagini caricate; l’ordinamento può avvenire attraverso il titolo, la data e ora o una modalità casuale. In aggiunta è possibile usare la modalità manuale, scegliendo quindi noi un’ordine delle immagini; rispetto sempre al concetto di galleria, quindi di sequenza (la prima, la seconda, la terza, e così via …). Inoltre è possibile indicare la modalità crescente o decrescente del criterio che abbiamo scelto. In particolare, l’ordinamento manuale, funziona come per le pagine, cioè sfruttando il campo menu_order (inizialmente impostato a 0 per tutte le immagini caricate).
Se avete dunque caricato una serie di immagini in un post e manipolato queste con l’ordinamento manuale, dobbiamo far in modo che nel nostro ciclo venga preso in considerazione anche l’ordine. Un modo rapido, ed estremamente semplice, per fare questo è utilizzare la funzione usort() per riordinare il nostro array per qualsiasi tipo di campo (menu_order, ID, data, etc…):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// dove è $post_id è l'id del post
// se siamo in un loop possiamo usare $post-ID
$ai =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $post_id );

// applico una mia funzione di ordinamento così
// da poter sceglere il campo su cui effettuare
// il sorting (nel nostro caso menu_order)
usort( $ai, "sortImage");
 
foreach($ai as $image) {
   echo '<p>' . $image->post_title . '<img src="' . wp_get_attachment_thumb_url( $image->ID ) . '" /></p>';
}

function sortImage( $a, $b ) {
    if($a->menu_order == $b->menu_order) return 0;
    return ($a->menu_order > $b->menu_order) ? 1 : -1;
    //return ($a->menu_order > $b->menu_order) ? -1 : 1; // decrescente
}

Manco a dirlo, ovviamente, se volete recuperare la “prima” e sola immagine caricata basta eliminare il foreach().

11 commenti a: “ ”

  1. 05 set, 2009 Il meglio della settimana #28 | BigThink:

    [...] Recuperare le immagini caricate in un Post Uno script per recuparare le immagini di un post, anche se queste non sono state effettivamente inserite nel testo! [...]

  2. 06 gen, 2010 James:

    Ciao e grazie mille per il tuo articolo. Pero’ non ho capito qual e’ il codice da inserire per volessi recuperare solo l’anteprima della prima immagine inserita nel post…

    RispondiQuota
  3. 07 gen, 2010 Giovambattista Fazioli:

    @James: commenta la riga 10 e 12 dell’ultimo esempio, eliminando quindi il foreach. Al posto della riga 10, quindi prima di echo ... inserisci:

    1
    $image = $ai[0]; // prendo la prima immagine solamente

    Spero di aver capito bene la tua domanda…

    RispondiQuota
  4. 07 gen, 2010 James:

    @Giovambattista Fazioli:
    Ciao giovambattista e grazie mille per la tua risposta. Ho inserito il codice come lo hai modificato e sembra ci sia un problema sulla funzione usort e inoltre l’immagine non viene visualizzata…
    Warning: usort() [function.usort]: Invalid comparison function. in /membri2/xxxxx/wp-content/themes/nomtema/index.php on line 27

    Come mai? uso WP 2.9.1

    RispondiQuota
  5. 07 gen, 2010 Giovambattista Fazioli:

    @James: sembrerebbe che la funzione di sort sortImage() non è scritta correttamente. In caso postami l’intero codice che hai scritto, anche in mail.

    RispondiQuota
  6. 07 gen, 2010 James:

    @Giovambattista Fazioli:

    Ti ho invito il codice php che ho inserito via mail

    Grazie mille

    RispondiQuota
  7. 11 nov, 2010 Giorgio:

    Ciao,
    vorrei chiederti una informazione sullo script, con l’introduzione di wp 3.0, hanno inserito la possibilità di inserire le thumbs, io avrei l’esigenza di modificare lo script in maniera tale da non far comparire nell’elenco delle immagini, quella che viene usata come thumbs del post.

    Sai per caso darmi una mano?
    grazie mille in anticipo,
    Giorgio

    RispondiQuota
  8. 12 nov, 2010 Giovambattista Fazioli:

    @Giorgio: potresti fare in questo modo. Prima di estrarre le immagini correlate ad un post, estrai l’eventuale thumbnail (come indicato in WordPress 2.9+: la nuova funzione post thumbnails). All’interno del loop di estrazione, poi, se l’immagine associata corrisponde a quella del thumbnail la escludi. Se ho capito bene…

    RispondiQuota
  9. 12 nov, 2010 Giorgio:

    Perfetto, ti ringrazio! Tra l’altro avevo pensato ad una soluzione di questo tipo o in alternativa pensavo di inserire la thumb come prima immagine in galleria e poi di escluderla attraverso un artifizio:

    1
    if($ai == $ai[0]) { } else { echo ... }

    potrebbe essere una soluzione ugualmente efficace secondo te?

    Grazie mille per la risposta,
    Giorgio

    RispondiQuota
  10. 12 nov, 2010 Giovambattista Fazioli:

    @Giorgio: va benissimo anche posizionandola come prima, basta ricordarselo :)

    RispondiQuota
  11. 12 nov, 2010 Giorgio:

    Ciao,
    scusa se continuo ad assillare, ma ottengo degli errori e non capisco come mai…

    la mia funzione è la seguente:

    1
    2
    3
    4
    $ai = &get_children('post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
    foreach($ai as $image) {
        echo '<p>' . $image->post_title . '</p>';
    }

    Come faccio a fargli fare il controllo per vedere se esiste la post thumbail e quindi escluderla? Nel mio template ho abilitato il supporto a tale funzione e tutto funziona perfettamente, solo che non ho capito come fargli appunto controllare quale elemento dell’array è la thumb del post e quindi di conseguenza escluderla dall’output…

    Se riesci a darmi una mano mi eviteresti di tagliarmi le vene… ci sto perdendo la pazienza dietro a sta cosa e non riesco a venirne a capo… :(

    grazie mille,
    Giorgio

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL