Vă treziți constant comutând între WordPress și un editor foto doar pentru a transforma imaginile în nuanțe de gri înainte de a le încărca? Este un proces anevoios și ineficient să editați fiecare fotografie individual înainte.
Din fericire, prin ani de experimentare cu WordPress, am descoperit o modalitate simplă de a nuanța automat imaginile în timpul încărcării, economisindu-vă timp prețios.
În acest articol, vă vom arăta cum să transformați imaginile în nuanțe de gri în WordPress în timp ce le încărcați pe site-ul dvs., pas cu pas.
Când ar trebui să folosiți imagini alb-negru în WordPress?
Imaginile alb-negru elimină toată informația de culoare, lăsând culorile imaginii să arate doar nuanțe de gri, variind între negru și alb.
În anumite situații, utilizarea imaginilor alb-negru poate fi benefică pentru site-ul dvs. WordPress. De exemplu, îl puteți folosi pentru a îmbunătăți lizibilitatea obiectelor afișate în imagine.
Sau, s-ar putea să doriți pur și simplu să utilizați imagini alb-negru pentru a crea un aspect atemporal și clasic pentru site-ul dvs. web.
Pe de altă parte, imaginile în nuanțe de gri sunt, de asemenea, utilizate frecvent pentru procesarea imaginilor datorită dimensiunii lor mici. Permite dezvoltatorilor să execute operațiuni complexe într-un timp mai scurt.
Acestea fiind spuse, să vedem cum puteți transforma imaginile în alb-negru în WordPress atunci când le încărcați.
Nuanțarea imaginilor la încărcare în WordPress
Când vine vorba de adăugarea de imagini în WordPress, ar trebui să le editați înainte de a le încărca folosind un software de editare foto precum Photoshop și să convertiți imaginile colorate în alb-negru.
Dacă aveți sute sau mii de imagini de încărcat, atunci poate dura mult timp să editați fiecare imagine manual.
Cu toate acestea, le puteți transforma automat în imagini alb-negru la încărcare. Pentru a începe, tot ce trebuie să faceți este să adăugați următorul cod în fișierul functions.php al temei dvs.:
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;
}
O modalitate simplă de a adăuga cod în fișierele temei este prin utilizarea pluginului WPCode pentru WordPress.
Este cel mai bun plugin pentru fragmente de cod care te ajută să rulezi fragmente de cod fără a fi nevoie să editezi manual fișierul functions.php al temei tale. Astfel, nu trebuie să-ți faci griji că îți vei strica site-ul.
Mai întâi, va trebui să descărcați și să instalați pluginul gratuit WPCode pe site-ul dvs. Dacă aveți nevoie de ajutor, atunci vă rugăm să urmați ghidul nostru despre cum să instalezi un plugin WordPress.
Notă: Versiunea gratuită a WPCode oferă tot ce aveți nevoie pentru a adăuga cu ușurință cod personalizat în WordPress. Pentru funcționalități mai avansate, cum ar fi o bibliotecă privată de fragmente în cloud, fragmente programate, pixeli de conversie și multe altele, puteți face upgrade la WPCode Pro.
La activare, puteți accesa Fragmente de cod » + Adăugare nou din tabloul de bord WordPress.
Apoi, navigați la opțiunea „Adăugați codul dvs. personalizat (fragment nou)” și faceți clic pe butonul „+ Adăugați fragment personalizat”.
În continuare, trebuie să selectați „Fragment PHP” ca tip de cod din opțiunile care apar.
Acum, pe pagina Creare fragment personalizat, introduceți un nume pentru fragmentul dvs. Acesta poate fi orice pentru a vă ajuta să vă amintiți la ce folosește codul.
Apoi, lipiți codul de mai sus în zona „Previzualizare cod”.
După ce ați introdus codul, puteți derula în jos la secțiunea „Inserare”.
Aici, puteți lăsa selectată opțiunea „Inserare automată”. Aceasta va insera și executa automat codul pentru dvs.
În cele din urmă, reveniți în partea de sus a ecranului și comutați comutatorul de la „Inactiv” la „Activ” și faceți clic pe butonul „Salvează fragmentul”.
Apoi, puteți testa codul editând sau adăugând o pagină nouă. Când sunteți în editorul WordPress, faceți clic pe butonul „+” și adăugați un bloc de imagini.
Acum puteți încărca orice imagine pe blogul dvs. WordPress, iar aceasta se va converti automat într-o imagine în nuanțe de gri.
Sperăm că acest articol v-a ajutat să învățați cum să transformați imaginile în alb-negru în WordPress. Puteți, de asemenea, să consultați ghidul nostru despre cum să adăugați modul întunecat pe site-ul dvs. WordPress și selecțiile noastre de experți pentru cel mai bun software de design web.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Tomas Kapler
Sfaturi grozave, aș dori doar să menționez că pentru multe utilizări ar putea fi mai bine să faceți acest lucru pur și simplu prin filtrul CSS, de ex.
img.bw {
filter: grayscale(1);
}
puteți chiar, de ex. afișa alb-negru în mod implicit și colorat la hover, sau puteți face animație de la gri la culori complete și înapoi, de ex.
img.bw {
filter: grayscale(0);
}
img.bw.grey { filter: grayscale(1); transition-property: filter; transition-duration: 1s; }
nici eu nu cred că filtrul wp_generate_attachment_metadata este cel potrivit, care ar trebui utilizat, deoarece este apelat la crearea meta, nu doar la crearea imaginii și face o a doua manipulare a imaginii, dar soluția potrivită ar fi mult mai lungă, așa că înțeleg de ce se face așa.
rok
Funcționează bine, dar la încărcare, WP 4.3 aruncă o eroare în biblioteca media.
Cred că am aplicat toate remedierile scrise în comentarii, dar totuși apare eroarea.
codul meu arată așa:
add_filter(‘wp_generate_attachment_metadata’,’themename_bw_filter’);
function themename_bw_filter($meta) {
$time = substr( $meta[‘file’], 0, 7); // <- obține ora corectă a încărcării
$file = wp_upload_dir( $time ); // <- localizează directorul corect de încărcare
$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
Vor schimba toate imaginile din WordPress în nuanțe de gri sau doar cele actualizate recent?
Tomaž Zaman
Știu că sunt puțin târziu la discuție, dar tocmai am avut aceeași problemă cu o eroare (pe care alții o raportează):
imagefilter() așteaptă resursă ca parametru 1, șir datAcest lucru se întâmplă atunci când încercați să încărcați o imagine prin intermediul ferestrei modale media în timp ce editați o postare, mai veche decât luna curentă, ceea ce aparent încurcă WordPress-ul în ceea ce privește directorul în care se află imaginea originală și în ce director ar trebui să salveze imaginea în nuanțe de gri.
Aceasta este soluția:
<?php
add_filter('wp_generate_attachment_metadata','themename_bw_filter');
function themename_bw_filter($meta) {
$time = substr( $meta['file'], 0, 7); // <- obține ora corectă a încărcării
$file = wp_upload_dir( $time ); // <- localizează directorul corect de încărcare
$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
cum să schimbi, rezultatul filtrului de imagine într-un folder/director specific
geertvdheide
O adăugare: am adăugat câteva rânduri pentru a ocoli problema existenței a două imagini cu același nume de fișier, cauzată de două apeluri add_image_size cu aceeași dimensiune. Codul suplimentar a fost găsit aici:
http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/
mklemme
@geertvdheide
Dacă doreați să adăugați suport pentru mai multe dimensiuni, încercați ce folosesc eu:
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 );
}
(Înălțimea nu este definită, doar lățimea.)
ar trebui să adăugați diferitele nume pentru ca funcția să se aplice tuturor:
[‘medium-thumb’ , ‘large-thumb’ , ‘small-thumb’] în codul de filtrare.
Apelarea miniaturi în tema dvs. este aceeași ca cea listată în articol:
Mike Logan
Idee excelentă, aproape 10 ani mai târziu, acest lucru este încă util.
geertvdheide
Mulțumesc pentru partajarea acestui cod! Cu excepția faptului că întâmpin o problemă ciudată atunci când încerc să o implementez. Este legată de dimensiunea imaginii încărcate (dimensiunea în pixeli, adică dimensiunile sale). Am copiat codul literal în fișierul functions.php al temei mele și funcționează de minune cu imagini mai mari decât dimensiunea specificată în apelul add_image_size. Dar când folosesc o imagine mai mică sau egală cu dimensiunea specificată, încărcătorul din WordPress îmi dă erori și nu procesează dimensiunea imaginii (fie din secțiunea media a mediului de administrare, fie dintr-un post sau pagină specifică). Eroarea:
Avertisment: imagefilter() așteaptă parametrul 1 ca resursă, string dat.
Scevații în plus în eroare, dar aceasta pare a fi cauza principală. Datele imaginii furnizate funcției imagefilter nu sunt valide sau nu există?
Aveți idee ce ar putea cauza asta? Singura diferență reală între situația mea și o instalare curată este că am adăugat și câteva alte apeluri add_image_size în alte scopuri pe site-ul meu. Adaug și aceeași dimensiune de două ori (una alb-negru, una normală), dar asta nu pare să fie o problemă cu imaginile mai mari.
Ed Nailor
@GEERTVDHEIDE
și pentru alții care au nevoie de asta:
Când scriptul convertește imaginea în alb-negru și fișierul încărcat nu se potrivește cu dimensiunea fișierului, acest lucru face ca scriptul să se defecteze. Pentru a preveni acest lucru, pur și simplu adăugați o condiție rapidă if() pentru a vă asigura că aveți $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;
}
Acest lucru va verifica dacă fișierul de dimensiunea solicitată există înainte de a încerca să îl convertească.
Sper că ajută!
frankiegershwin
@Otto42 Mulțumesc pentru ofertă. Voi face asta.
Otto42
@Otto42 Mulțumesc pentru ofertă. Voi face asta.
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 Anunță-mă dacă ai nevoie de ajutor. Am adăugat și o modalitate de a face tonuri sepia în comentariile mele la postarea originală: http://t.co/avDNNEX
rodhk
@rodriguezhernan ce prostie de truc…. trebuie să mă ating de cod pentru asta
wpbeginner
@Otto Thanks for the comment Otto. Updated the post as well
Otto
Rețineți că oamenii ar trebui să schimbe „themename” cu numele temei lor în loc.