WordPress: gestione di gallerie e immagini

9 aprile 2014

Gestire le immagini in WordPress è semplice anche per chi si avvicina per la prima volta al CMS. Grazie al framework e alla sua API è anche possibile modificare il markup che manda al browser le istruzioni per visualizzare immagini e gallerie. Come si vedrà in questo articolo, le possibilità di personalizzazione sono letteralmente infinite.

L’inserimento di singole immagini in WordPress

In WordPress le immagini (e ogni altro tipo di file consentito) vengono memorizzate nell’archivio multimediale, cui si accede dal menu "Media" del pannello di amministrazione.

Figura 1. Elenco dei file multimediali presenti nella libreria Media

File multimediali presenti nella libreria Media

Caricando le immagini dalla scheda Media, queste non vengono inserite direttamente in articoli e pagine, ma rimangono semplicemente a disposizione per il successivo utilizzo. L’inserimento effettivo va effettuato dall’editor TinyMCE tramite le schede di acquisizione. In fase di caricamento, vengono richieste diverse informazioni – titolo, didascalia, testo alternativo e descrizione – che saranno poi utilizzate da WordPress per generare il markup inviato al browser.

Figura 2. Caricamento e modifica dalla scheda di inserimento/modifica dei post

Caricamento e modifica delle immagini

Nella successiva fase di inserimento negli articoli, è necessario inserire altri dati: bisogna impostare l’allineamento, il collegamento ipertestuale, le dimensioni dell’immagine. Terminate le operazioni, WordPress genera il codice che viene inviato all’editor TinyMCE, che è più o meno il seguente:


<a href=" ... " rel="attachment wp-att-1922">
	<img src=" ... " alt="Alt" width="300" height="300" class="size-medium wp-image-1922" />
</a> Caption

Lo shortcode genera nel front-end una div strutturata come segue:

<div id="attachment_1922" class="wp-caption aligncenter" style="width: 310px">
	<a rel="attachment wp-att-1922" href="http://localhost:8888/wp/la-gestione-delle-immagini-in-wordpress/wordpress-icon-512-2/">
		<img class="size-medium wp-image-1922" width="300" height="300" alt="Alt" src="http://localhost:8888/wp/wp-content/uploads/2014/03/wordpress-icon-512-300x300.png">
	</a>
	<p class="wp-caption-text">Caption</p>
</div>

Le dimensioni delle immagini in WordPress

Le nuove immagini vengono aggiunte alla libreria in varie dimensioni. Oltre al file originale, vengono create copie di dimensioni ridotte che possono essere utilizzate con funzioni diverse. Piuttosto che visualizzare un’immagine di 3000px di larghezza, infatti, è sicuramente preferibile visualizzare un’anteprima di 600px (o meno) e rendere disponibile il file originale per il solo download. WordPress fornisce quattro dimensioni predefinite: thumbnail (150×150), medium (300×300), large (1024×1024), full (dimensioni reali).

Figura 3. Le dimensioni predefinite delle immagini nel tema Twenty Fourteen

Dimensioni predefinite delle immagini

Sia che si sviluppi un tema da zero, sia che si modifichi un tema esistente, è possibile aggiungere nuovi formati immagine. A questo scopo, WordPress dispone della funzione add_image_size():

<?php add_image_size( $name, $width, $height, $crop ); ?>

La funzione accetta quattro argomenti, di cui solo il primo obbligatorio:

ArgomentoDescrizione
$nameè una stringa che imposta il nome del nuovo formato immagine (alcuni nomi sono riservati a WordPress e non possono essere utilizzati: thumb, thumbnail, medium, large, post-thumbnail);
$widthè un intero che rappresenta la larghezza in pixel;
$heightè un intero che rappresenta l’altezza in pixel;
$croppuò assumere valore true (ritaglio netto), false (ridimensionamento e ritaglio) o un array che stabilisce la posizione dell’area ritagliata. Il valore predefinito è false.

Se si volesse aggiungere un formato immagine delle dimensioni in pixel di 480 x 320, bisognerebbe aggiungere nel file functions.php del tema attivo (o del suo child theme) il seguente codice:

function theme_setup() {
	if ( function_exists( 'add_image_size' ) ) { 
		add_image_size( 'custom_image_size', 480, 320 ); 
	}
}
add_action( 'after_setup_theme', 'theme_setup' );

La funzione theme_setup() viene invocata dall’action hook after_setup_theme per aggiungere il nuovo formato immagine. Questo è ora disponibile per l’accesso diretto dal codice (ad esempio all’interno del Loop), ma non ancora selezionabile nella scheda di inserimento media. Per rendere il formato disponibile all’amministratore, bisogna aggiungere nel file functions.php il seguente codice:

function custom_images_names( $sizes ) {
    return array_merge( $sizes, array(
        'custom_image_size' => __('Custom Size Name'),
    ) );
}
add_filter( 'image_size_names_choose', 'custom_images_names' );

Il filtro image_size_names_choose permette di modificare l’elenco dei formati immagine disponibili nella libreria Media. La funzione custom_images_names() accetta come argomento l’array dei nomi dei formati immagine disponibili e restituisce un nuovo array, i cui elementi sono dati dal precedente array $sizes con l’aggiunta del nuovo formato custom_image_size.

Figura 4. La nuova scheda di inserimento immagini

La nuova scheda di inserimento immagini

L’aggiunta di una nuova dimensione non rigenera le immagini caricate in precedenza. Quindi, se si opera su un sito già attivo, è necessario creare un file nelle nuove dimensioni per tutte le immagini presenti in archivio. Per evitare un lungo lavoro di reinserimento, si può utilizzare uno dei vari plugin disponibili tra cui l’ottimo Regenerate Thumbnails.

Se vuoi aggiornamenti su WordPress: gestione di gallerie e immagini inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su WordPress: gestione di gallerie e immagini

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy