Ti ritrovi costantemente a passare da WordPress a un editor di foto solo per rendere le immagini in scala di grigi prima di caricarle? È un processo noioso e inefficiente modificare ogni foto singolarmente in anticipo.
Fortunatamente, attraverso anni di sperimentazione con WordPress, abbiamo scoperto un modo semplice per rendere automaticamente le immagini in scala di grigi durante il caricamento, facendoti risparmiare tempo prezioso.
In questo articolo, ti mostreremo come rendere le immagini in scala di grigi in WordPress mentre le carichi sul tuo sito, passo dopo passo.
Quando dovresti usare immagini in scala di grigi in WordPress?
Le immagini in scala di grigi rimuovono tutte le informazioni sul colore, lasciando i colori delle immagini per mostrare solo sfumature di grigio, variabili tra bianco e nero.
In determinate situazioni, l'uso di immagini in scala di grigi può essere vantaggioso per il tuo sito web WordPress. Ad esempio, puoi usarlo per migliorare la leggibilità degli oggetti mostrati nell'immagine.
Oppure, potresti semplicemente voler usare immagini in scala di grigi per creare un look classico e senza tempo per il tuo sito web.
D'altra parte, le immagini in scala di grigi sono anche comunemente utilizzate per l'elaborazione delle immagini a causa delle loro piccole dimensioni. Ciò consente agli sviluppatori di eseguire operazioni complesse in tempi più brevi.
Detto questo, vediamo come puoi trasformare le tue immagini in scala di grigi in WordPress quando le carichi.
Rendere le immagini in scala di grigi al caricamento in WordPress
Quando si tratta di aggiungere immagini in WordPress, dovresti modificarle prima di caricarle utilizzando un software di fotoritocco come Photoshop e convertire le immagini a colori in scala di grigi.
Se hai centinaia o migliaia di immagini da caricare, può richiedere molto tempo per modificare ogni immagine manualmente.
Tuttavia, puoi trasformarle automaticamente in immagini in scala di grigi al momento del caricamento. Per iniziare, tutto ciò che devi fare è aggiungere il seguente codice al file functions.php del tuo tema:
add_filter('wp_generate_attachment_metadata','rb_bw_filter');
function rb_bw_filter($meta) {
$path = wp_upload_dir(); // get upload directory
$file = $path['basedir'].'/'.$meta['file']; // Get full size image
$files[] = $file; // Set up an array of image size urls
foreach ($meta['sizes'] as $size) {
$files[] = $path['path'].'/'.$size['file'];
}
foreach ($files as $file) { // iterate through each image size
// Convert image to grayscale credit to http://ottopress.com/2011/customizing-wordpress-images/
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
}
return $meta;
}
Un modo semplice per aggiungere codice ai file del tema è utilizzare il plugin WPCode per WordPress.
È il miglior plugin per snippet di codice che ti aiuta a eseguire snippet di codice senza la necessità di modificare manualmente il file functions.php del tuo tema. In questo modo, non dovrai preoccuparti di interrompere il tuo sito.
Innanzitutto, dovrai scaricare e installare il plugin gratuito WPCode sul tuo sito. Se hai bisogno di aiuto, segui la nostra guida su come installare un plugin di WordPress.
Nota: La versione gratuita di WPCode offre tutto ciò di cui hai bisogno per aggiungere facilmente codice personalizzato in WordPress. Per funzionalità più avanzate come una libreria di snippet cloud privata, snippet pianificati, pixel di conversione e altro ancora, puoi passare a WPCode Pro.
Dopo l'attivazione, puoi accedere a Snippet di codice » + Aggiungi nuovo dalla tua bacheca di WordPress.
Quindi, naviga verso l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e fai clic sul pulsante '+ Aggiungi snippet personalizzato'.
Successivamente, devi selezionare 'Snippet PHP' come tipo di codice tra le opzioni che appaiono.
Ora, nella pagina Crea snippet personalizzato, inserisci un nome per il tuo snippet. Può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.
Quindi, incolla il codice sopra nell'area 'Anteprima codice'.
Dopo aver inserito il codice, puoi scorrere verso il basso fino alla sezione ‘Inserimento’.
Qui, puoi lasciare selezionata l'opzione ‘Inserimento automatico’. Questo inserirà ed eseguirà automaticamente il codice per te.
Infine, torna in cima allo schermo e sposta l'interruttore da ‘Inattivo’ ad ‘Attivo’ e fai clic sul pulsante ‘Salva Snippet’.
Successivamente, puoi testare il codice modificando o aggiungendo una nuova pagina. Quando sei nell'editor di WordPress, fai clic sul pulsante ‘+’ e aggiungi un blocco Immagine.
Ora puoi caricare qualsiasi immagine sul tuo blog WordPress, e verrà automaticamente convertita in un'immagine in scala di grigi.
Speriamo che questo articolo ti abbia aiutato a imparare come rendere le immagini in scala di grigi in WordPress. Puoi anche consultare la nostra guida su come aggiungere la modalità scura al tuo sito WordPress e le nostre scelte esperte del miglior software di web design.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Tomas Kapler
Ottimo consiglio, vorrei solo menzionare che per molti utilizzi potrebbe essere meglio farlo semplicemente tramite il filtro CSS, ad esempio:
img.bw {
filter: grayscale(1);
}
puoi persino, ad esempio, mostrare in bianco e nero per impostazione predefinita e a colori al passaggio del mouse, oppure puoi fare un'animazione da scala di grigi a colori completi e viceversa, ad esempio:
img.bw {
filter: grayscale(0);
}
img.bw.grey {
filter: grayscale(1);
transition-property: filter;
transition-duration: 1s;
}
non credo neanche io che il filtro wp_generate_attachment_metadata sia quello appropriato da usare a causa del suo richiamo nella creazione di meta, non solo nella creazione di immagini, e nell'effettuare una seconda manipolazione dell'immagine, ma la soluzione appropriata sarebbe molto più lunga, quindi capisco perché è fatto in questo modo
rok
Funziona bene ma durante il caricamento, WP 4.3 genera un errore nella libreria multimediale.
Penso di aver applicato tutte le correzioni scritte nei commenti, ma l'errore persiste.
il mio codice è così:
add_filter(‘wp_generate_attachment_metadata’,’themename_bw_filter’);
function themename_bw_filter($meta) {
$time = substr( $meta[‘file’], 0, 7); // <- ottiene l'ora corretta del caricamento
$file = wp_upload_dir( $time ); // <- individua la directory di caricamento corretta
$file = trailingslashit($file[‘path’]).$meta['sizes']['slide-pic']['file'];
if( $file ) {
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
}
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
return $meta;
}
Kim
Tutte le immagini in WordPress diventeranno in scala di grigi o solo quelle appena caricate?
Tomaž Zaman
So di essere un po' in ritardo nella discussione, ma ho appena avuto lo stesso problema con un errore (che altri segnalano):
imagefilter() si aspetta il parametro 1 come risorsa, stringa dataQuesto accade quando si tenta di caricare un'immagine tramite la modale multimediale durante la modifica di un post, più vecchio del mese corrente, il che apparentemente confonde WordPress sulla directory in cui si trova l'immagine originale e in quale directory dovrebbe salvare l'immagine in scala di grigi.
Questa è la soluzione:
<?php
add_filter('wp_generate_attachment_metadata','themename_bw_filter');
function themename_bw_filter($meta) {
$time = substr( $meta['file'], 0, 7); // <- ottiene l'ora corretta del caricamento
$file = wp_upload_dir( $time ); // <- individua la directory di caricamento corretta
$file = trailingslashit($file['path']).$meta['sizes']['themename-bw-image']['file'];
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
return $meta;
}
endul
come cambiare, filtro risultato immagine in una cartella/directory specifica
geertvdheide
Un'aggiunta: ho aggiunto alcune righe per aggirare il problema di avere due immagini con lo stesso nome file, causato da due chiamate add_image_size con la stessa dimensione. Il codice aggiuntivo è stato trovato qui:
http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/
mklemme
@geertvdheide
Se volessi aggiungere il supporto per più dimensioni, prova quello che uso io:
if ( function_exists( ‘add_theme_support’ ) ){
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 50, 50, true );
add_image_size( ‘medium-thumb’, 660, ”, true );
add_image_size( ‘large-thumb’, 960, ”, true );
add_image_size( ‘small-thumb’, 100, ”, true );
}
(L'altezza non è definita, solo la larghezza.)
dovresti aggiungere i diversi nomi per far sì che la funzione si applichi a tutti:
[‘medium-thumb’ , ‘large-thumb’ , ‘small-thumb’] nel codice del filtro.
Chiamare la miniatura nel tuo tema è lo stesso indicato nell'articolo:
Mike Logan
Ottima idea, quasi 10 anni dopo è ancora utile.
geertvdheide
Grazie per aver condiviso questo codice! Tranne che sto riscontrando un problema strano quando cerco di implementarlo. È correlato alla dimensione dell'immagine caricata (dimensione in pixel, cioè le sue dimensioni). Ho copiato il codice letteralmente nel functions.php del mio tema, e funziona a meraviglia con immagini più grandi della dimensione specificata nella chiamata add_image_size. Ma quando uso un'immagine più piccola o uguale alla dimensione specificata, l'uploader di WordPress mi dà errori e non elabora la dimensione dell'immagine (sia dalla sezione media dell'ambiente admin, sia da un post o pagina specifica). L'errore:
Warning: imagefilter() expects parameter 1 to be resource, string given.
Altre cose nell'errore, ma questa sembra essere la causa principale. I dati dell'immagine forniti alla funzione imagefilter non sono validi o non esistono?
Hai qualche idea su cosa stia causando questo? L'unica vera differenza tra la mia situazione e un'installazione pulita è che ho anche aggiunto alcune altre chiamate add_image_size per altri scopi nel mio sito. Sto anche aggiungendo la stessa dimensione due volte (una in bianco e nero, una normale), ma questo non sembra essere un problema con le immagini più grandi.
Ed Nailor
@GEERTVDHEIDE
e per altri che ne hanno bisogno:
Quando lo script sta convertendo l'immagine in scala di grigi e il file caricato non rientra nella dimensione del file, questo causa l'interruzione dello script. Per evitarlo, aggiungi semplicemente una rapida condizione if() per assicurarti di avere $file.
$file = trailingslashit($file[‘path’]).$meta[‘sizes’][‘themename-bw-image’][‘file’];
if( $file ) {
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
——– remainder of code until ——–
return $meta;
}
Questo verificherà che la dimensione del file richiesta esista prima di tentare di convertirla.
Speriamo che questo aiuti!
frankiegershwin
@Otto42 Grazie per l'offerta. Lo farò.
Otto42
@frankiegershwin che peccato! Sentiti libero di scrivermi direttamente per aiuto con il codice. otto@wordpress.org
frankiegershwin
@Otto42 thank you! I had a bit of a hard time, actually and had to undoe it
will pick it up tomorrow. It’s a good way to mix it up onsite
Otto42
@frankiegershwin Fammi sapere se hai bisogno di aiuto. Ho aggiunto un modo per fare anche toni seppia nei miei commenti sul post originale: http://t.co/avDNNEX
rodhk
@rodriguezhernan vaya idiotez de truco…. madremua tocar el codigo para eso
wpbeginner
@Otto Thanks for the comment Otto. Updated the post as well
Otto
Nota che le persone dovrebbero cambiare "nomedeltheme" con il nome del loro tema.