Mutarea de la TimThumb la BFIThumb

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.


De ce am folosit TimThumb?

Î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:

  • Redimensionați imaginea
  • Decupați o porțiune a imaginii
  • Aplicați filtre de imagine ca tonuri de gri și nuanțe
  • Cache imaginea creată pentru utilizare ulterioară

Aceste funcții ne-au permis să creăm imagini minunate care nu se limitează la miniaturi pătrat mici.


De ce nu mai putem folosi TimThumb

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.


WP Image Editor la salvare ...

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'); 

WP Image Editor Extended

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ă:

  • Se poate efectua numai redimensionarea, decuparea și salvarea fișierelor imagine
  • Nu există filtre de imagine
  • Nu se cachează imaginea
  • Poate doar redimensiona imaginile în jos și nu în sus
  • Ambele dimensiuni de lățime și înălțime sunt necesare pentru a efectua o redimensionare
  • Utilizarea diferă de TimThumb

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.


Cel mai bun din ambele lumi: BFIThumb

Aș dori să vă prezint un nou resizer de imagine numit BFIThumb. BFIThumb a fost făcut cu aceste puncte în minte:

  • Utilizare 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.
  • Utilizare similară cu TimThumb - Utilizarea lui TimThumb este ideală, deoarece trebuie doar să schimbați 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.
  • Capacități similare pentru TimThumb - Abilitatea de a aplica filtre de imagini a fost unul dintre punctele de vânzare ale companiei TimThumb. Deoarece dorim o tranziție ușoară, ar fi mai bine dacă unele filtre de imagine utilizate în mod obișnuit ar fi încă disponibile.

Cum functioneaza

  • Scriptul se extinde WP_Image_Editor și adaugă mai multe funcționalități.
  • Implementează un resizator mai flexibil, care permite redimensionarea numai în funcție de lățime sau înălțime. Acest lucru este util mai ales în machetele Masonry, puteți reduce dimensiunile imaginii păstrând în același timp raportul înălțime original.
  • Clasele extinse implementează câteva filtre de imagini găsite în TimThumb.
  • Memorează imaginile procesate în dosarul de încărcări WordPress pentru încărcarea mai rapidă pe încărcările ulterioare ale paginilor.

Cum să-l folosească

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 "„;

Resize & Crop

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);

Filtre de imagine

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);

Concluzie

Î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!

Cod