WordPress come creare formati di immagine personalizzati con add_image_size

WordPress offre la possibilità di creare formati propri di ridimensionamento dei media.
Di default infatti sono disponibili 3 formati ed un 4 thumbnail.
Se vogliamo quindi aggiungere un formato personalizzato ci basta agire all’interno del file functions.php del nostro tema attivo.

Ecco il codice:

add_image_size contiene il primo parametro che è il nome che ci serve per identificare il formato, il secondo parametro invece è la larghezza che vogliamo venga impostata durante il ridimensionamento, il terzo invece si riferisce all’altezza, se noti è impostata a 9999 come da commento, significa che non è fissa ma viene calcolata in base all’aspect ratio dell’immagine. Se invece fosse stata impostata come fissa, l’immagine avrebbe subito un Crop al fine di mantenere dimensioni fisse.

Tale tecnica è molto utile in siti Responsive, aggiungendo infatti un immagine featured (immagine che rappresenta un articolo), WordPress in modo del tutto automatico creerà i formati che abbiamo aggiunto.

Andiamo ora ad analizzare come recuperare le immagini nel Front-End.

Ci basterà il seguente codice:

A nostro avviso questa tecnica è molto utile laddove è necessario avere a disposizione diversi formati per i media, da gestire in siti responsive. In questo modo si evita di dover fare upload di troppi media.

 

Il riscontro della modifica add_image_size

Abbiamo caricato un’immagine di 4000 pixel di larghezza, e siamo andati a vedere nella directory upload di WordPress per vedere che cosa sia accaduto.

immaginiDimensionate

In effetti un’immagine di larghezza 2800 è stata creata, da notare che avendo impostato un’altezza indefinita, è stato mantenuto l’aspect ratio.

Cambiare colore ad una png con Photoshop

Photoshop permette di cambiare colore ad un asset.

Capita spesso che avendo un sito, vogliamo cambiarne il tema, e di conseguenza gli assets e le immagini css devono essere cambiate di colore.

Photoshop permette di fare questo in tutta facilità, mantenendo eventuali ombre e gradienti.

Partiamo da zero quindi, aprendo in Photoshop una png di cui vogliamo cambiare il colore.

Nel mio caso avevo una png blu, e voglio trasformarla in rosso.

iconablu

Crea un nuovo livello photoshop cliccando sul foglio bianco.

iconanewlevel