Share
TimThumb har lenge vært en favoritt bildeformat for WordPress-temaforfattere. Men med de nye WordPress-temainngivelseskravene på ThemeForest må vi si farvel til TimThumb.
Denne artikkelen vil lære deg hvordan du overfører temaene dine fra TimThumb, og inn i et nytt bildeformatskript som heter BFIThumb.
BFIThumb er et open source-prosjekt og er tilgjengelig på GitHub.
Før WordPress hadde muligheten til å utføre fleksibel bildestørrelse, var det eneste alternativet å bruke tredjepartsbiblioteker som TimThumb. Den fine tingen om TimThumb var at den var fullpakket med funksjoner, og det var veldig enkelt å bruke.
Du trenger ikke å gjøre mye for at det skal fungere, du trenger bare å bruke TimThumb-skriptet som din src attributt i din img merk og send det bildet:
Med den enkle endringen kan du:
Disse funksjonene tillot oss å lage flotte flotte bilder som ikke var begrenset til små firkantede miniatyrer.
En god grunn er den største sikkerhetsfeilen i TimThumb som ble oppdaget og avslørt i versjon 1.10. I et nøtteskall var det et sløyfehull som tillot at ondsinnet kode kjøres på serverne som arrangerte et TimThumb-skript.
Mange steder ble hacket på grunn av dette - inkludert noen av mine egne - og også noen av mine temaer-brukere. Selv om dette ble løst i senere versjoner av TimThumb, var mange ikke engang klar over sikkerhetsfeilen før det var for sent. Det var opp til temaforfatterne og nettstedseierne å oppdatere deres temaer eller TimThumb-skript for å inkludere reparasjonen.
Etter min mening var problemet med denne debaclen ikke på grunn av sikkerhetshullet selv, men mer på grunn av hvordan denne typen problem ikke kunne løses på en global skala. Siden TimThumb var et no-frills, tredjepartsscript, var det vanskelig for folk å få tak i sikkerhetsoppdateringen raskt, eller til og med for å bare få beskjed om at det forelå en sikkerhetsfeil.
Hvis en sikkerhetsfeil på dette nivået ble funnet i WordPress-kjerne, ville det mest sannsynlig bli patched med en rask WordPress-sikkerhetsoppdatering, og de fleste ville ikke engang være oppmerksom på problemet.
Med det sagt, kan det være bedre å bruke en WordPress-funksjon for å utføre vårt bildeformat.
Så, vi må slippe TimThumb fra våre WordPress-temaer. Som temaforfattere på ThemeForest er kanskje den mest åpenbare grunnen det TimThumb er ikke lenger tillatt med implementeringen av Envatos nye WordPress Theme Submission Requirements.
Heldig for oss, da WordPress 3.5 ble utgitt, introduserte den WP Image Editor-klassen. Denne klassen har noen grunnleggende funksjoner for å rotere, beskjære og endre størrelse på bilder. Nå har vi innebygd bildestørrelse innenfor WordPress!
Sannsynligvis er en av de beste funksjonene i WP Image Editor-klassen den støtter både GD og ImageMagick-biblioteker (i motsetning til TimThumb som bare støttet GD). Dette betyr at våre temaer kan støtte flere WordPress-installasjoner.
Slik bruker du WP_Image_Editor klasse:
Accentsconagua
// Returnere en implementering som utvider WP_Image_Editor $ image = wp_get_image_editor ('cool_image.jpg'); hvis (! is_wp_error ($ image)) $ image-> resize (400, 300, true); $ image-> save ('new_image.jpg'); WP Image Editor er enkel, men litt mangelfull for våre hensikter. Du må tydeligvis lage din egen wrapper-funksjon, slik at du ikke trenger å bruke en gjeng med kode hver gang du vil vise et forstørret bilde.
En annen ting å merke seg er at wp_get_image_editor funksjonen aksepterer bare en bildefilbane, du må også legge til wrapper-funksjonen din, en metode for å konvertere den til bildeadressen din.
Bortsett fra behovet for å lage en wrapper-funksjon, er det noen få mangler for å enkelt erstatte TimThumb med WP_Image_Editor klasse:
Det ville vært fint om vi hadde noe som inneholder funksjoner i både WP Image Editor-klassen og TimThumb. Dette er grunnen til at jeg opprettet skriptet BFIThumb.
Jeg vil gjerne introdusere deg til en ny bildebehandler som heter BFIThumb. BFIThumb ble laget med disse punktene i tankene:
WP_Image_Editor å utføre bildehåndtering - Bruk av denne WordPress-klassen tillater mindre feil, siden hoveddelen av prosessen ikke utføres av vår egen kode. Dette betyr at vi også kan gi resizing for både GD og ImageMagick-biblioteker.src attributtet til din img tags. Den resized image-banen ville bli returnert av funksjonen. Dette muliggjør en mer lesbar kode og enklere overgangstid.WP_Image_Editor og legger til mer funksjonalitet.BFIThumb ble laget for å lignes på TimThumbs bruk. Hovedfunksjonen du må ringe er bfi_thumb. I likhet med TimThumb, bruker du denne funksjonen i src attributtet til din img tags. Denne funksjonen tar inn en bildeadresse sammen med en rekke parametere, og returnerer nettadressen til det behandlede bildet.
Her er den grunnleggende bruken av funksjonen, nedbrutt for å forklare hva som skjer:
// Inkluder biblioteket require_once ('BFI_Thumb.php'); // Våre parametre, gjør en resize $ params = array ('width' => 400, 'height' => 300); // Hent nettadressen til det behandlede bildet $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Skriv ut vårt img tag ekko "
"; For å utføre resizing og beskjæring, trenger du bare å sette inn de nødvendige parametrene:
"; // Endre størrelsen bare etter bredde, høyden vil justere til riktig forhold $ params = array ('width' => 400); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Endre størrelsen bare etter høyde, bredden vil justere til riktig forhold $ params = array ('height' => 300); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Endre størrelsen på bredde og høyde og beskjære $ params = array ('width' => 400, 'height' => 300, 'crop' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); Bildefilter er ganske nyttige, og hvis de brukes riktig, kan du aktivere kule effekter i temaene dine. For eksempel, gråtoner bildefilter kan brukes til å lage svarte og hvite bilder som blir farget når de svinger på.
Jeg hadde også en bruk for opasitet filter når jeg trengte å gjøre bakgrunnsbildet ugjennomsiktig for å vise litt av bakgrunnsfargen.
// Gråskala $ params = array ('grayyscale' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Colorize $ params = array ('color' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Negate $ params = array ('negate' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Endre opacity (gjør bildet ditt til en PNG) $ params = array ('opacity' => 80); // 80% ugjennomsiktig $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Flere parametere $ params = array ('width' => 400, 'height' => 300, 'gråtoner' => sant, 'colorize' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params); I denne artikkelen lærte vi hvordan du fjerner vår avhengighet av TimThumb og går videre mot en mer WordPress-orientert tilnærming til å utføre bildestørrelsen ved hjelp av BFIThumb. Med denne tilnærmingen kan vi utføre litt fleksibelt bildeformatering og også bruke noen av bildefiltrene vi elsket i TimThumb.
Forhåpentligvis kan dette lille skriptet hjelpe deg med overgangen din fra TimThumb. Hvis du har noen forslag til nye funksjoner for å bedre dette bildet, må du legge igjen en kommentar nedenfor.
Jeg setter stor pris på tilbakemeldinger, kommentarer og forslag.
Hva erstatter du TimThumb med? Vil du bruke BFIThumb i ditt neste WordPress-tema? Fortell meg hva du tenker!
