Tema Enfold: modificare dimensioni immagine in evidenza

Il tema premium Enfold ha una Immagine in evidenza per gli articoli molto larga ma bassa. A me ha sempre causato problemi questa dimensione dell’immagine, perché ormai uno dei formati più utilizzati su web è il formato quadrato, se non addirittura verticale per le immagini.

Inoltre nella pagina che raggruppa gli articoli del blog, l’anteprima dell’immagine è quadrata, quindi viene ritagliata in modo diverso rispetto all’Immagine in evidenza negli articoli del tema Enfold, rischiando di non sapere bene se utilizzare immagini quadrate o rettangolari orizzontali.

Ecco come si presenta la classica dimensione dell’immagine in evidenza con Enfold:

Anche nella versione mobile si presenta bassa e lunga, senza sfruttare appieno lo schermo dello smartphone che potrebbe ospitare una immagine più alta ed accattivante.
Sul mio sito Miciogatto.it ho preferito modificare la dimensione dell’immagine in evidenza degli articoli, e renderla più alta, ottenendo questo risultato:

Come vedi le proporzioni sono diverse, l’immagine è più alta, e volendo potresti utilizzare anche una immagine quadrata, se le tue visite provengono principalmente da mobile, perché invece su Desktop una immagine quadrata a tutto schermo potrebbe occupare troppo spazio.

Come modificare le dimensioni dell’immagine in evidenza su Enfold

Come fare dunque per modificare le dimensioni dell’immagine in evidenza di Enfold?
Ci sono due modi per modificare le dimensioni delle immagini dei post su Enfold:

• tramite una funzione nel file functions.php
• tramite un plugin

Modificare l’immagine in evidenza di Enfold con il file funtions.php

Puoi usare una funzione messa a disposizione dagli sviluppatori del tema, ed inserirla nel tuo file functions.php.

Premessa: ti consiglio sempre di usare un tema child quando installi Enfold, così potrai fare tutte le modifiche che vuoi ai file del tema, senza perdere le tue modifiche quando ci saranno aggiornamenti al tema. Leggi qui come creare un tema child

Nel tuo tema child, puoi creare un file functions.php che può contenere tutte le funzioni che vuoi per modificare parti del tema. Puoi caricare un file vuoto via FTP e modificarlo andando su “Aspetto > Editor del tema”

A questo punto puoi aggiungere nel file functions.php le seguenti righe:

add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );

function enfold_customization_modify_thumb_size( $size ) {

	$size['entry_with_sidebar'] 	= array('width'=>834, 'height'=>493);
	$size['entry_without_sidebar'] 	= array('width'=>834, 'height'=>493);

	return $size;	

}

Come vedi è una funzione in cui puoi decidere le dimensioni di base della tua immagine in evidenza, cioè la larghezza (width) e l’altezza (height). Sono impostate 2 dimensioni perché Enfold carica immagini diverse a seconda se usi la barra laterale nel tuo sito, richiamando quindi “entry_with_sidebar” oppure se non inserisci le barre laterali nel tuo sito richiamerà “entry_widthout_sidebar”.

Le dimensioni che inserisci sono le dimensioni di base, poi l’immagine si adatterà in proporzione a seconda delle dimensioni dello schermo.

Su Enfold ci sono molte immagini che vengono generate quando carichi la tua immagine sul post o su una gallery, ecco qui tutto l’elenco delle dimensioni che puoi gestire:

$avia_config['imgSize']['widget'] = array('width'=>36,  'height'=>36);						// small preview pics eg sidebar news
$avia_config['imgSize']['square'] = array('width'=>180, 'height'=>180);		                 // small image for blogs
$avia_config['imgSize']['featured']  = array('width'=>1500, 'height'=>430 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] 	 = array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
$avia_config['imgSize']['portfolio'] 	= array('width'=>495, 'height'=>400 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 );						// images for portfolio 4 columns
$avia_config['imgSize']['gallery'] 	= array('width'=>845, 'height'=>684 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] 	= array('width'=>710, 'height'=>375 );						// images for magazines
$avia_config['imgSize']['masonry']  = array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] 	= array('width'=>845, 'height'=>321);		            	// big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 );	

Una volta inserita la funzione nel file functions.php e salvato, le immagini inserite da quel momento in poi nei tuoi articoli tramite il bottone “Immagine in evidenza”, saranno ridimensionate con le dimensioni che hai impostato tu.
Come fare per le immagini già presenti sul sito?
La soluzione è ricaricarle tutte, oppure utilizzare un plugin per rigenerare le immagini nelle giuste dimensioni. Un plugin gratuito che serve a questo scopo è Regenerate Thumbnails

Cambiare le dimensioni dell’immagine in evidenza con un plugin

L’altra via, adatta ai meno “smanettoni” per modificare le dimensioni dell’immagine in evidenza su Enfold ma su qualsiasi tema WordPress, è utilizzare un plugin come Simple Image Sizes. Questo plugin, del tutto gratuito, rileva tutte le immagini necessarie al tema, e permette di modificare le loro dimensioni e di rigenerare tutte le immagini già caricate.

Una volta installato il plugin, dovrete andare su “Impostazioni > Media” e troverete l’elenco di tutte le immagini che potete modificare, con le rispettive dimensioni. Potete così modificare larghezza ed altezza e poi premere il pulsante in basso “Regenerate Thumbnails”.
Nel nostro caso, se vogliamo semplicemente modificare le dimensioni della “big preview” di Enfold, ci basterà modificare le dimensioni alla voce “entry_with_sidebar” o “entry_widthout_sidebar”, lasciando inalterate le altre, e poi dall’elenco con le voci di spunta sottostante, lasciare selezionate solo le voci relative a quelle due dimensioni, per rigenerare solo quelle.

Su MicioGatto ho rigenerato circa 12000 immagini, ed il tempo necessario è stato di quasi 2 ore. Ma il plugin le ha rigenerate tutte correttamente, senza alcun intoppo.

Ora sapete come impostare una dimensione personalizzata all’immagine in evidenza su Enfold, ed il metodo tramite il plugin “Simple image sizes” è valido per qualsiasi tema WordPress. Se hai domande, scrivile pure nei commenti!