Una guida alle dimensioni di ritaglio delle immagini di WordPress

WordPress 3.9 è uscito con molta potenza extra sotto il cofano. Una fantastica nuova funzionalità tra le tante è l’aggiunta della possibilità di controllare la posizione di ritaglio delle immagini caricate in WordPress: è davvero semplice!!


Prima di procedere, un grande ringraziamento a Brad Touesnard chi ha dato questo fantastico contributo che ora è stato incluso nel core di WordPress! Ho pensato che questa sarebbe stata una grande opportunità non solo per approfondire come sfruttare questa nuova funzionalità, ma anche per scorrere e ottenere una buona presa sull’intero ambito di questa funzione.

L’inizio – Aggiunta o personalizzazione delle dimensioni delle immagini

Per impostazione predefinita, WordPress genera 3 versioni aggiuntive dell’immagine. Una versione “Miniatura”, una “Media” e una “Grande”. La dimensione originale dell’immagine caricata viene definita versione “Completa”.

Personalizzazione dei valori predefiniti

Puoi sovrascrivere i valori predefiniti di ciascuna di queste dimensioni del raccolto abbastanza facilmente. Puoi andare dal tuo Dashboard di WordPress, Impostazioni >> Media e modifica i valori lì oppure puoi farlo tramite il tuo tema o il file delle funzioni del plugin in questo modo:

update_option ('thumbnail_size_w', 250);
update_option ('thumbnail_size_h', 250);
update_option ('thumbnail_crop', 1);

Aggiunta di ulteriori dimensioni

È possibile posizionare rapidamente e facilmente questa funzione nel file delle funzioni del tema o del plug-in:

add_image_size ($ name, $ width, $ height, $ crop);

Finirebbe per assomigliare a questo:

add_image_size ('homepage-thumb', 250, 250, true);

Ritaglio duro normale

Mancia: Ricorda di assegnare a ogni dimensione aggiuntiva di immagine un nome univoco ;-).

Tutto ciò che devi sapere può essere trovato tramite il Codice WordPress.

Qualche magia di WordPress 3.9+ – Controllo della posizione di ritaglio

Il parametro $ crop era in precedenza solo un valore booleano, vero o falso. Quindi, sia una coltura proporzionale morbida che una coltura dura se impostata su vera (continua a leggere più in basso per vedere la differenza tra una coltura dura e morbida). Tuttavia ora puoi usare un array per specificare il posizionamento dell’area di ritaglio, (x_crop_position, y_crop_position). Mi piacciono le immagini ritagliate dal centro, quindi ad esempio la tua funzione potrebbe apparire così in questo momento:

add_image_size ('homepage-thumb', 250, 250, array ('center', 'center'));

Ritaglio duro selezionato dall'utente

Il parametro $ crop accetta ancora valori vero / falso e, secondo Brad, è pienamente compatibile con le versioni precedenti. La sintassi è identica a quella della proprietà CSS background-position, quindi è familiare sia ai designer che agli sviluppatori, ma qui sono comunque per motivi di chiarezza.

in alto a sinistra
centro sinistro
in basso a sinistra
in alto a destra
centro giusto
in basso a destra
centro in alto
centro centro
centro in basso

Quindi ho capito, ora come lo uso?

La grande notizia … è esattamente la stessa !! Per una suddivisione completa, come sempre guarda il Codice WordPress. Ecco un promemoria in ogni caso. Per chiamare questa immagine personalizzata nel tuo tema o plugin. Nell’esempio che stiamo usando, ecco come:

the_post_thumbnail ( 'home page-thumb');

o…

wp_get_attachment_url (get_post_thumbnail_id ($ post-> ID, 'homepage-thumb'));

Ma per quanto riguarda tutte le mie immagini esistenti?

Come probabilmente saprai, le dimensioni del raccolto vengono ciclicate e generate al momento del caricamento. Ciò significa ora che dopo aver utilizzato questa nuova funzione aggiungendo la nostra posizione di ritaglio personalizzata o modificando / aggiungendo una nuova dimensione di ritaglio, ora ci resta ciò che è stato generato al momento del caricamento e nessuna di queste nuove versioni di immagini è disponibile per noi, non fico!

Aaah ma aspetta .. Fortunatamente ci sono molte persone intelligenti e fantastiche nella comunità di WordPress per salvare la giornata, ecco il rigenerare il plugin per le anteprime. Questo plugin è in circolazione da molto tempo, è fantastico! Scorrerà tutte le tue immagini caricate esistenti e rigenererà tutte le nuove dimensioni di immagine che hai aggiunto o personalizzato. Problema woohooo risolto ��

Hard vs. Ritaglio morbido: hai deciso

Ritaglio duro

Ritaglio duro normale
L’immagine verrà ridimensionata e quindi ritagliata nelle dimensioni esatte specificate. A seconda della proporzione dell’immagine in relazione alla dimensione del ritaglio, è probabile che l’immagine venga sempre tagliata.

Ritaglio morbido

Ritaglio morbido
Un ritaglio morbido non taglierà mai alcuna immagine, ridimensionerà l’immagine fino a quando non si adatta alle dimensioni specificate, mantenendo le proporzioni originali.

Qualcosa che vale la pena sapere …

Nel caso in cui qualsiasi dimensione dell’immagine caricata, (larghezza o altezza) sia inferiore a quella della dimensione del ritaglio impostata, verrà ignorata e non verrà realizzata una versione per quella dimensione! WordPress scorrerà tutte le dimensioni delle immagini impostate e creerà solo le versioni di quelle immagini che sono più grandi di quella della versione che sta cercando di generare. In tal caso, quando un’immagine viene recuperata all’interno del tema o del plug-in e non esiste, verrà impostata automaticamente l’immagine “Completa” come fallback.

Divertiti a implementare questa nuova fantastica funzionalità sui tuoi temi e plugin. È ora di calciare un po ‘di culo e ritagliare alcune immagini ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me