TimThumb a fost un script preferat de redimensionare a imaginii pentru autorii temelor WordPress. Dar, cu noile cerințe de prezentare a tematicii WordPress pe ThemeForest, trebuie să ne luăm la revedere TimThumb.
Acest articol vă va învăța cum să vă tranziți temele departe de TimThumb și într-un nou script de redimensionare a imaginii numit BFIThumb.
BFIThumb este un proiect open source și este disponibil pe GitHub.
Înainte ca WordPress să aibă capacitatea de a efectua o redimensionare a imaginii flexibile, singura opțiune era să folosești biblioteci de terțe părți precum TimThumb. Lucrul frumos despre TimThumb a fost că era plin de caracteristici și era foarte ușor de folosit.
Nu a trebuit să faceți prea multe pentru ca aceasta să funcționeze, ar trebui să folosiți scriptul TimThumb ca pe al tău src
atribut în dvs. img
etichetați și expediați imaginea:
Cu această schimbare simplă, ați putea:
Aceste funcții ne-au permis să creăm imagini minunate care nu se limitează la miniaturi pătrat mici.
Un motiv bun este defectul major de securitate al lui TimThumb, care a fost descoperit și expus în versiunea 1.10. Într-un cuvânt, a existat o gaură de buclă care permitea rularea codului malware pe serverele care găzduiau un script TimThumb.
Multe site-uri au fost hackate din cauza asta - inclusiv unele din propria mea - și, de asemenea, unii dintre utilizatorii temelor mele. Deși acest lucru a fost stabilit în versiunile ulterioare ale lui TimThumb, o mulțime de oameni nici măcar nu erau conștienți de defecțiunile de securitate până când era prea târziu. Autorii temelor și proprietarii de site-uri au fost în măsură să își actualizeze temele sau scripturile TimThumb pentru a include remediul.
În opinia mea, problema cu acest dezastru nu a fost din cauza gaurii de securitate în sine, ci mai mult din cauza modului în care acest tip de problemă nu a putut fi stabilit cu ușurință la scară globală. Din moment ce TimThumb a fost un script non-frills, de la o terță parte, a fost greu pentru oameni să apuce rapid update-ul de securitate sau chiar să primească notificări despre existența unui defect de securitate.
În cazul în care un defect de securitate de acest nivel a fost găsit în WordPress de bază, cu toate acestea, cel mai probabil, ar fi patch-uri imediat cu o actualizare rapidă de securitate WordPress și majoritatea oamenilor nu ar fi chiar conștienți de problemă.
Cu aceasta fiind spus, ar fi mai bine să utilizați o funcție WordPress pentru a efectua redimensionarea imaginii.
Deci, trebuie să renunțăm la TimThumb din temele noastre WordPress. Ca autori temă pe ThemeForest, probabil motivul cel mai evident este acela TimThumb nu mai este permisă cu implementarea noilor cerințe de transmitere a temei WordPress de la Envato.
Lucky pentru noi, când a fost lansat WordPress 3.5, a introdus clasa WP Image Editor. Această clasă are câteva funcții de bază pentru rotirea, trunchierea și redimensionarea imaginilor. Acum, avem built-in redimensionarea imaginii în WordPress!
Probabil una dintre cele mai bune caracteristici ale clasei WP Image Editor este că aceasta acceptă atât bibliotecile GD, cât și bibliotecile ImageMagick (spre deosebire de TimThumb care a suportat numai GD). Aceasta înseamnă că temele noastre pot suporta mai multe instalații WordPress.
Așa veți folosi WP_Image_Editor
clasă:
// Returnați o implementare care extinde WP_Image_Editor $ image = wp_get_image_editor ('cool_image.jpg'); dacă (! is_wp_error ($ image)) $ image-> redimensionați (400, 300, true); $ image-> salvați ('new_image.jpg');
Editorul de imagini WP este simplu, dar puțin lipsit de intențiile noastre. Veți avea nevoie clar de a crea propria funcție de împachetare, astfel încât să nu fie nevoie să utilizați o grămadă de cod de fiecare dată când doriți să afișați o imagine redimensionată.
Un alt lucru de observat este faptul că wp_get_image_editor
funcția acceptă doar o cale de fișier imagine, va trebui, de asemenea, să adăugați în funcția de împachetare o metodă pentru ao converti la adresa URL a imaginii dvs..
În afară de necesitatea de a crea o funcție de împachetare, există câteva deficiențe pentru a înlocui cu ușurință TimThumb cu WP_Image_Editor
clasă:
Ar fi frumos dacă am avea ceva care încorporează caracteristici ale clasei WP Image Editor și TimThumb. Acesta este motivul pentru care am creat scriptul BFIThumb.
Aș dori să vă prezint un nou resizer de imagine numit BFIThumb. BFIThumb a fost făcut cu aceste puncte în minte:
WP_Image_Editor
pentru a efectua manipularea imaginii - Utilizarea acestei clase WordPress permite mai puține bug-uri, deoarece cea mai mare parte a procesului nu este efectuată de propriul cod. Acest lucru înseamnă că putem oferi, de asemenea, redimensionare atât pentru bibliotecile GD cât și pentru bibliotecile ImageMagick.src
atributul dvs. img
Etichete. Calea imaginii redimensionate va fi returnată de funcție. Acest lucru permite un cod mai ușor de citit și un timp de tranziție mai simplu.WP_Image_Editor
și adaugă mai multe funcționalități.BFIThumb a fost făcut ca fiind similar cu utilizarea lui TimThumb. Funcția principală pe care va trebui să o apelați este bfi_thumb
. Similar cu TimThumb, veți folosi această funcție în src
atributul dvs. img
Etichete. Această funcție are o adresă URL a imaginii împreună cu o serie de parametri, apoi returnează adresa URL a imaginii prelucrate.
Iată utilizarea de bază a funcției, defalcate pentru a explica ce se întâmplă:
// Include biblioteca require_once ('BFI_Thumb.php'); // Parametrii noștri, redimensionați $ params = array ('width' => 400, 'height' => 300); // Obțineți adresa URL a imaginii prelucrate $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Imprimați tag-ul ecg echo "„;
Pentru a efectua redimensionarea și trunchierea, trebuie doar să introduceți parametrii necesari:
// Redimensionați doar în funcție de lățime, înălțimea se va ajusta la raportul corect $ params = array ('width' => 400); $ image = bfi_thumb ('URL-to-image.jpg', $ paramuri); // Redimensionați numai înălțime, lățimea se va ajusta la raportul corect $ params = array ('height' => 300); $ image = bfi_thumb ('URL-to-image.jpg', $ paramuri); // Redimensionați după lățime și înălțime și cultura $ params = array ('width' => 400, 'height' => 300, 'crop' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ paramuri);
Filtrele de imagine sunt destul de utile, iar dacă sunt utilizate corect pot permite efecte reci în teme. De exemplu, alb-negru Filtrul de imagini poate fi utilizat pentru a crea imagini alb-negru care devin colorate atunci când se deplasează.
De asemenea, am avut o utilizare pentru opacitate
filtrați când aveam nevoie să fac imaginea de fundal opacă pentru a arăta un pic de culoare de fundal.
// Grayscale $ params = array ("gri" = true); $ image = bfi_thumb ('URL-to-image.jpg', $ paramuri); // Culoare $ params = array ('color' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ paramuri); // Negate $ paramuri = array ('negate' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ paramuri); // Schimbați opacitatea (face imaginea într-un PNG) $ params = array ('opacity' => 80); // 80% opac $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Parametri multipli $ params = array ('lățime' = = 400, 'înălțime' = = 300, 'gri "=> true,' colorize '=>' # ff0000 '); $ image = bfi_thumb ('URL-to-image.jpg', $ paramuri);
În acest articol am învățat cum să eliminăm dependența noastră de TimThumb și să mergem spre o abordare mai orientată spre WordPress pentru a efectua redimensionarea imaginilor folosind BFIThumb. Cu această abordare, putem efectua o redimensionare a imaginii flexibile și, de asemenea, să folosim unele filtre de imagine pe care le-am iubit în TimThumb.
Sperăm că acest script mic vă poate ajuta cu trecerea de la TimThumb. Dacă aveți sugestii pentru funcții noi pentru a face această imagine mai bună, lăsați un comentariu mai jos.
Apreciez foarte mult orice feedback, comentarii și sugestii.
Ce înlocuiți cu TimThumb? V-ați folosi BFIThumb în următoarea temă WordPress? Dați-mi voie să știu ce credeți!