Miniatura,immagine in evidenza o thumbnail: come gestirle e richiamarle in un sito WordPress

Incomincio nel dire che miniatura, immagine in evidenza o thumbnail vogliono dire lo stessa cosa: sono quelle piccole immagini che vengono visualizzate la maggior parte delle volte nella home o negli elenchi delle categorie per arricchire i contenuti e renderli più attraenti.

img-in-evidenza

La prima cosa da fare prima di mettere le mani al codice del tema, è definire le dimensioni standard delle immagini nel back end (nella bacheca ) di WordPress andando dal menu a sinistra su Impostazioni > media.

Una volta effettuata questa operazione potete seguire i seguenti passi per richiamare l’immagine nel vostro tema:

1)  Controllate che il vostro tema supporti le thumbnails aprendo il file function.php nella cartella del  tema guardando se è presente il seguente codice:

<add_theme_support( 'post-thumbnails' );

Se non c’è, lo dovrete inserire.

2) aprite il file php del vostro tema in cui desiderate richiamare l’immagini in evidenza. Per esempio, se volete richiamarla in homepage dovrete aprire solitamente il file index.php.

3) Inserite il seguente codice

<?php the_post_thumbnail(); ?>

nei tag html presenti nel file php del vostro tema dove vorrete posizionare l’immagine in evidenza di solito viene inserito in questo modo:

<!-- Codice base per mostrare l'immagine in evidenza -->
<div class="entry-content">
    <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('thumbnail'); ?>
    </a>
</div>

Si può inoltre richiamare l‘immagine in evidenza in varie dimensioni e, cioè, quelle configurate nelle impostazioni media nel back-end di wordpress (ved. Definire il ridimensionamento delle immagini in wordpress).

the_post_thumbnail();

Senza parametri = ‘thumbnail’

the_post_thumbnail('thumbnail');

Thumbnail (default 150px x 150px max)

the_post_thumbnail('medium');

Dimensione media (default 300px x 300px max)

the_post_thumbnail('large');

Dimensione grande: (default 640px x 640px max)

the_post_thumbnail('full');

Dimensione originaria  (original size uploaded)

the_post_thumbnail( array(100,100) );

Altre dimensioni

The following two tabs change content below.
Sono un Web Designer, ma sopratutto un appassionato di grafica, di internet, nuove tecnologie e in particolare del potente cms che è WordPress.

Lascia un commento

XHTML: È possibile utilizzare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>