La gestione delle immagini in WordPress

Scopo di questo articolo è quello di dare informazioni dettagliate su come gestire le dimensioni delle immagini in WP con la funzione add_image_size () e, con esempi, verificare le opzioni disponibili per questa funzione.

Indice paragrafi:

I formati immagine di WordPress

Capire il dimensionamento delle immagini WP

Dimensioni predefinite delle immagini e filenaming

Come attivare il supporto per l’immagine in evidenza

Aggiungere formati immagine con add_image_size()

Utilizzo avanzato di the_post_thumbnail()

Rimozione dei formati immagine predefiniti WP

I formati immagine di WordPress

Quando si carica un’immagine attraverso i media Uploader (Aggiungi Media) nel post editor, o direttamente nella libreria multimediale tramite il menu Bacheca> Media> Aggiungi nuovo, WordPress crea automaticamente più versioni dell’immagine durante la fase di “macinatura…[crunching]” del processo di caricamento, e crea queste versioni sul server:

  • Miniatura (thumbnail)
  • Media
  • Grande
  • Dimensioni originali (se più grande delle dim. ‘grande’ di cui sopra)

 

Le dimensioni di default delle immagini sono impostate in Bacheca>Impostazioni>Media (vedi screenshot) e, per impostazione predefinita, sono impostate come segue:

Impostazioni WordPress media (Dashboard> Impostazioni> Media)

1) Impostazioni WordPress media (Dashboard> Impostazioni> Media)

  • L’impostazione predefinita Dimensione miniatura è 150px x 150px (con un’opzione di ritaglio, di cui parleremo più avanti)
  • L’impostazione predefinita Medium Size è larghezza massima 300px, altezza max 300px
  • L’impostazione predefinita Large Size è larghezza massima 1024px, altezza max 1024px

Capire le opzioni di dimensionamento media WP

WordPress utilizza due metodi per ridimensionare le immagini: un metodo di ritaglio ‘duro’ (hard crop) e uno ‘morbido’ (soft-crop o box-resize). Il formato immagini medie e grandi utilizzano il metodo “box-resize”, il che significa che la dimensione dell’immagine viene ridotta fino a quando la maggiore delle dimensioni (orizzontale o verticale) si inserisce all’interno del “box” determinato dalla “Larghezza massima” e “Altezza massima”. Vediamo alcuni esempi …

Ipotizziamo di caricare un’immagine che è 600px di larghezza per 600px , l’immagine taglia M creata sarà 300px per 300px. Questo ha senso, dato il rapporto di formato 1: 1. (Vedi imm. sotto)

medium-600-600

Tuttavia, se l’immagine originale è 300px di larghezza per 600px di altezza, siccome la maggiore delle dimensioni in questo caso è l’altezza, l’immagine viene ridotta in modo che l’altezza si inserisca all’interno del box che ha altezza massima di 300px (vedi configurazione di default). Le proporzioni originali sono conservate, quindi l’immagine taglia M risultante sarà 150px di larghezza per 300px di altezza. (Vedi imm. sotto)

medium-150-600

Allo stesso modo, se carichiamo un’immagine originale di 300px X 600px di larghezza, l’impostazione “larghezza massima” ha la prevalenza e determina un ridimensionamento a 150px X 300px di larghezza. (Vedi imm. sotto)

medium-600-150

In altre parole, l’immagine originale viene ridotta fino inserisce all’interno del “box” 300px da 300px – da qui il termine “box resize”.

E ‘importante notare che “box resize” viene sempre usata per medie e grandi dimensioni. Ciò significa che l’immagine è sempre ridimensionata per adattarsi all’interno del “box” e non si verifica alcun ritaglio . Nota : la casella contorno blu negli schemi di cui sopra rappresenta questo “box”.
Invece, l’impostazione Miniatura può utilizzare il metodo “box resize” o, se la casella “Ritaglia” è selezionata, il metodo “hard crop”, il che significa che la miniatura risultante sarà sempre dimensionata come da specificato dalle impostazioni Larghezza e Altezza. Il ritaglio avverrà certamente per immagini non proporzionali alle dimensioni indicate nelle impostazioni. Questa impostazione, se da un lato può apparire eccessivamente stressante, dall’altro consente un controllo assoluto sul layout delle nostre pagine che risulteranno certamente più pulite ed ordinate, in particolare le pagine “elenco” dove tutte le miniature saranno perfettamente allineate. In conseguenza di questi ragionamenti è quindi buona norma uploadare immagini che rispecchino le proporzioni utilizzate nel nostro tema in modo da non avere risultati scomposti ed inattesi.

Dimensioni predefinite delle immagini e filenaming

Come accennato in precedenza, le dimensioni in PX delle immagini risultanti dal ridimensionamento sono aggiunte al nome originale del file per creare i nomi dei file per le tre dimensioni.

Ad esempio, il caricamento di un file immagine di 1200px x 1200px di nome img.jpg si tradurrà in 3 file che vengono salvati nella cartella wp-content/uploads, in aggiuntiva al file originale:

  • La versione Dimensione miniatura verrà chiamata img-150 × 150.jpg
  • La versione Medium Size si chiamerà img-300 × 300.jpg
  • La versione Large Size si chiamerà img-1024 × 1024.jpg

Si noti che, nell’esempio di cui sopra, le dimensioni delle immagini conservano il rapporto di 1: 1 aspetto dell’immagine originale (1200px x 1200px), in questo caso dunque c’è corrispondenza esatta fra la dimensione “media” creata (img-300 × 300.jpg) e il default della dimensione media come da impostazioni ma nella maggior parte degli esempi reali la proporzione dell’immagine originale uploadata non sarà 1: 1, il che significa che le dimensioni degli allegati saranno diverse da quelle sopra indicate.

La seguente tabella fornisce alcuni altri esempi variando le dimensioni delle immagini originali, ipotizzando di avere impostato i valori di default (Bacheca> Impostazioni> Media) come visto sopra in immagine 1

Es: Dimensioni originali
larghezza x altezza
Multimedia predefinito Le immagini create sul server
1. img.jpg, 1200px x 1200px Thumbnail
Medio
Large
Full Size
img-150 × 150.jpg
img-300 × 300.jpg
img-1024 × 1024.jpg
img.jpg
2. img.jpg, 900px x 900px Thumbnail
Medio
Large
Full Size
img-150 × 150.jpg
img-300 × 300.jpg

img.jpg
3. img.jpg, 500px x 250px Thumbnail (ritaglio deselezionato)
Medio
Large
Full Size
img-150 × 75.jpg
img-300 × 150.jpg

img.jpg
4. img.jpg, 1200px x 600px * Thumbnail (ritaglio selezionato)
Medio
Large
Full Size
img-150 × 150.jpg
img-300 × 150.jpg
img-1024 × 506.jpg
img.jpg
  • Es.2 : Le dimensioni dell’immagine originale sono inferiori a quelle del default per le grandi dimensioni, quindi non viene creata l’immagine ‘large’.
  • Es.4 : Questo esempio presuppone che sia stata selezionata la checkbox “ritaglio”, pertanto, per la dimensione miniatura, il formato originale viene ignorato e viene creata una miniatura di 150px x 150px esatti.

 

Le funzioni base relative alle immagini

Come attivare il supporto per l’immagine in evidenza

Le ‘immagini in evidenza non sono automaticamente abilitate in tutti i temi e sono state introdotte in WP dalla versione 2.9, occorre tenerne conto ed eventualmente abilitarle con l’aggiunta nel file “functions.php” del theme (abbiamo visto in altri post come utilizzare i temi figli per modificare un theme WP)

Quindi, se prima il tema non disponeva di questa ‘feature’ ora nella pagina di editing o aggiunta nuovi post si vedrà, in basso a destra il box: immagine-in-evidenza-wp

col quale, esattamente come per inserire un’immagine nell’articolo, potremo settare l’immagine in evidenza del nostro post.

Per mostrare nel file di template l’immagine in evidenza dovremo usare la funzione the_post_thumbnail() all’interno di un loop ; la funzione così chiamata si occupa di stampare a video l’output completo del tag immagine. Come impostazione di default, in assenza di ulteriori istruzioni, la funzione mostrerà la miniatura nelle dimensioni impostate come abbiamo visto sopra.

Aggiungere formati immagine con add_image_size()

Per una panoramica completa delle funzioni riferite alla gestione delle immagini, dobbiamo introdurre un’altra funzione ovvero add_image_size() [add_image_size($name, $width, $height, $crop)] e un suo alias specifico per l’immagine in evidenza set_post_thumbnail_size( )

. Con questa funzione possiamo definire a nostro piacimento le dimensioni per le immagini del nostro theme, compresa la dimensione dei thumbnail o quelle da utilizzare ad esempio in un template per uno specifico post_type. In questo contesto vediamo che:

Con add_image_size() abbiamo quindi a disposizione una potente funzione per il ridimensionamento delle immagini, come sempre è bene non abusare in quanto l’aggiunta di numerosi formati rallenta la procedura di aggiunta media e consuma spazio disco.

NOTA IMPORTANTE: la funzione add_image_size() ha effetto solo per le immagini che ancora non sono state uploadate, e quindi il nuovo formato non è disponibile per le immagini già caricate in precedenza. Per ricostruire tutti i formati si può utilizzare un utilissimo plugin: Regenate Thumbnails

Alcune  funzioni avanzate relative alle immagini WP

Utilizzo avanzato di the_post_thumbnail()

Possono essere passati due argomenti opzionali a  the_post_thumbnail(). Il primo sono le dimensioni passate
a) come nome ( ‘thumbnail’, ‘medium’ or ‘large’) come definiti nelle impostazioni di base o un nome “custom definito in add_image_size()

b) come array di due numeri rappresentanti la larghezza e l’altezza in pixel – es. array(120,80)

Il secondo, anch’esso un array contenente src, class, alt e title quindi ad esempio:

Rimozione dei formati immagine predefiniti WP

E’ possibile inibire a WordPress la creazione dei formati immagine predefiniti? Evidentemente la risposta a questo quesito consentirebbe di risparmiare tempo e spazio limitando i formati immagine a quelli (generati custom con la funzione add_image_size()) strettamente necessari per i template di pagina del nostro theme.

Questa funzione si aggancia all’hook intermediate_image_sizes_advanced ovvero alla fase di creazione dei formati immagine all’upload; l’unset determina la non-creazione del formato relativo ( [‘thumbnail’], [‘medium’], [‘large’] ) .

(4318)

Articoli correlati:

Tagged under:

7 Commenti

  1. MONICA Rispondi

    Ciao, io sto lottando con le immagini da un po’ e non riesco a trovare la risposta ad un quesito. Immagino che ogni template abbia le sue dimensioni personalizzate per l’immagine in evidenza e anche per le altre immagini che alleghi al post.
    Ma le dimensioni supportate da ciascun template dove le trovo?
    Voglio dire
    Grande
    medio
    piccolo
    Quando ridimensiono un immagine per prepararla non posso mica dare questi parametri e io vorrei creare la giusta dimensione prima ancora di caricarle. devo considerare che le misure che mi offre a fianco di grande, medio, piccolo siano le dimensioni giuste sopportate?
    Grazie

    1. wpLeader Rispondi

      Il tema ha certamente un set di dimensioni immagine, ad esempio vedo http://www.ideedituttounpo.it/viaggiare/italia/emilia-romagna/podere-casale.php in cui l’immagine http://www.ideedituttounpo.it/wp-content/uploads/2016/10/Podere-casale-le-vigne.jpg è 752 x 490 e si adatta bene al formato post.
      Certo la stessa dimensione non è adatta per le immagini della slider della home, infatti l’immagine risulta piuttosto sgranata. Se questo è il problema che vuoi risolvere occorre capire come viene generata la slider, in pratica le cose da fare sono: aggiungere alle funzioni del tema un formato ad hoc per la slider ( vedi https://softrade.it/WP/add_image_size/) e fare upload di immagini più grandi in modo che le funzioni di generazione dei vari formati ti consenta di avere a disposizione sia il formato per i post ( 752 x 490 ) sia per la slider ( ipotesi 1300 x 700). Nella slider, quando si chiama the_post_thumbnail() si può passare il formato richiesto. Ad esempio se hai creato con add_image_size() il formato “home_slider” [ add_image_size(‘home_slider’, 1300, 700, true); ]nel template che genera la slider della home andrà utilizzata la funzione the_post_thumbnail( ‘home_slider’ ) che ti va a prendere l’immagine con dimensione 1300 x 700. Tutto ciò vale per i nuovi upload, per i quali disporrai del formato home_slider” mentre per i vecchi upload questo non esiste. Condizione necessaria per un buon risultato è comunque quella di uploadare immagini di dimensioni almeno uguali a 1300 x 700

  2. MONICA Rispondi

    Ti ringrazio moltissimo per la tua risposta, ancora una volta capisco che questo tema ha un sacco di problemi (non solo quello delle immagini, ma ad esempio anche quelli dei microdati).
    Ma tu da dove hai visto che l’immagine della slider potrebbe essere 1300×700? Io alle dimensioni dell’immagine in evidenza 752×490 ci sono arrivata a “tentoni”, (non chiedermi in che modo: non lo so nemmeno io). Ma non si potrà procedere a tentoni per capire di che dimensioni caricare.
    E comunque grazie perchè il problema della slider, l’avevo notato (ovvio che si nota, le foto fanno schifo), ma non sapevo proprio come fare ad ovviare, visto che l’immagine della slider viene presa da Immagine in evidenza, quindi pensavo la dovesse adattare “lui” in qualche modo.
    Mi studio il link che mi hai indicato.
    Grazie

    1. SoftradeWeb Rispondi

      con qualsiasi browser ( io uso chrome ) posizioni il mouse su un qualsiasi elemento della pagina ( l’immagine ad esempio) e facendo tasto destro->ispeziona elemento vedi la struttura della pagina web e tutte le informazioni relative. la tua immagine della slider ha dimensioni originali 752 x 491 ma è ridimensionata a 1300 x 849, (1300 è la max larghezza del < div class="container" > come definito nei fogli di stile), poi in altezza viene nascosta nella parte bassa perchè un altro elemento (< div id="sequence" > ) ha max altezza 550px, quindi le dimensioni esatte della tua immagine slider sono 1300 x 550, così ottieni un risultato ottimale
      screenshot
      [edited]
      ovviamente nel tuo caso, siccome la slider prende la stessa immagine del post, questa soluzione non va bene perchè questo formato non è adatto come featured image del singolo post, quindi la soluzione di compromesso è uploadare immagini di 1300 x 800 px che sono proporzioni ~ analoghe a 750 x 490, tenendo conto che nella slider la parte bassa della foto non si vedrà perchè limitata in altezza a 550px

  3. MONICA Rispondi

    Grazie infinite! Davvero tanto!
    Mi sembrava di aver capito che quello fosse il sistema giusto per vedere le dimensioni delle immagini, ma mi sono accorta che non ovunque me le fa vedere.
    Quindi non capivo se avevo preso un abbaglio oppure proprio non la potevo capire questa cosa.
    Credo che questo problema sia sempre dovuto al mio template che me ne crea anche altri…
    Proverò a dimensionare le immagini come mi hai indicato tu!

    Buonissimo weekend

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

× Supporto Live

Al momento siamo offline. Potete contattarci via email..