La maggior parte dei temi di woredpress utilizzano un’unica immagine per rappresentare gli articoli. Le immagini in evidenza sono pesso accompagnate da un riassunto del post e sono linkate all’articolo completo.

Attivare il supporto per le immagini in evidenza

Se stiamo creando un tema da capo è necessario attivare il supporto per le thumbnail.

add_theme_support( 'post-thumbnails' );

è possibile anche specificare la loro presenza nei post type specificati

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

Specificare le dimensioni

Modalità bod-resizing – Immagine intera

In questo caso l’immagine viene ridimensionata proporzionalmente fino a quando non rientra completamente nel riquadro specificato. Sarà mostrata l’immagine intera tuttavia senza rispettare le proporzioni indicate.

set_post_thumbnail_size( 70, 70 );

Modalità hard-crop – Immagine tagliata

L’immagine viene ridimensionata in modo che occupi perfettamente il riquadro specificato. La porzione in accesso viene eliminata.

set_post_thumbnail_size( 70, 70, true );

Inserire dimensioni personalizzate

È possibile definire altre thumbnail che verranno create in fase di caricamento dell’immagine.
La ‘thumb-piccola’ sarà tagliata alle esatte dimensioni (in larghezza o lunghezza).
La ‘thumb-media’ sarà ridimensionata in larghezza, con altezza non limitata.
La ‘thumb-grande’ sarà ridimensionata proporzionalmente in larghezza e in altezza

function isw_thumbnail_size()
{
    add_image_size( 'thumb-piccola', 100, 100, true );
    add_image_size( 'thumb-media', 420, 9999 );
    add_image_size( 'thumb-grande', 720, 340 );
}
add_action( 'after_setup_theme', 'isw_thumbnail_size' );

Mostrare la thumnbail in un template

All’interno del loop usiamo the_post_thumbnail()
Per la thumbnail di default

the_post_thumbnail();

Per le dimensioni aggiuntive

the_post_thumbnail( 'thumb-piccola' );

Verificare l’esistenza della thumbnail

utilizziamo il tag condizionale has_post_thumbnail()

if ( has_post_thumbnail() )
{
    // codice per mostrare l'immagine
}
else
{
    // mostra immagine predefinita
}

Visualizzare le Immagini in evidenza all’esterno del loop

Possiamo recuperare l’indirizzo dell’immagine in evidenza e ricostruire l’html.

$src = wp_get_attachment_url( get_post_thumbnail_id( $id ) );

dove $id è l’id del post a cui è associata l’immagine.

Spostare il box ‘immagine in evidenza’ dalla schermata di modifica

Per modificare la posizione del blocco per l’upload spediamo una funzione all’hook do_meta_boxes.
Con remove_meta_box eliminiamo il blocco dalla posizione ‘side’.
Con add_meta_box() lo inseriamo in posizione centrale sotto l’editor.

add_action('do_meta_boxes', 'isw_sposta_div_thumb' );

function isw_sposta_div_thumb()
{
    remove_meta_box( 'postimagediv', 'post', 'side' );
    add_meta_box('postimagediv', __('Immagine in evidenza'), 'post_thumbnail_meta_box', 'isw_banner', 'normal', 'high');
}

Rigenerare le thumbnail

Quando modifichiamo le dimensioni delle immagini in evidenza o aggiungiamo nuove thumb personalizzate come ‘thumb-piccola’ o ‘thumb-media’, le immagini precedentemente caricate nel sito non verranno adattate automaticamente. Per ricreare tutte le thumb così come è impostato nel file functions.php è necessario utilizzare un plugin come Regenerate Thumbnails


  inStileWeb.com
blog comments powered by Disqus