Share
TimThumb har länge varit favoritbildsformat för WordPress-temförfattare. Men med de nya WordPress-tematilldelningskraven på ThemeForest måste vi säga adjö till TimThumb.
Den här artikeln kommer att lära dig hur du övergår dina teman bort från TimThumb och till ett nytt bildformat som heter BFIThumb.
BFIThumb är ett open source-projekt och finns tillgängligt på GitHub.
Innan WordPress hade möjlighet att utföra flexibel bildåterställning, var det enda alternativet att använda tredje parts bibliotek som TimThumb. Det trevliga med TimThumb var att det var fullt med funktioner, och det var väldigt lätt att använda.
Du behövde inte göra mycket för att det skulle fungera, du skulle bara behöva använda TimThumb-skriptet som din src attribut i din img tagga och skicka bilden:
Med just den enkla förändringen kan du:
Dessa funktioner gjorde det möjligt för oss att skapa fantastiska bilder som inte var begränsade till små fyrkantiga miniatyrbilder.
En bra anledning är den stora säkerhetsfelet i TimThumb som upptäcktes och exponerades i version 1.10. I ett nötskal var det ett loophål som tillåter att skadlig kod körs på servrarna som värd ett TimThumb-skript.
Många webbplatser hackades på grund av detta - inklusive några av mina egna - och även några av mina temanes användare. Trots att detta var löst i efterföljande versioner av TimThumb var många inte ens medvetna om säkerhetsfelet förrän det var för sent. Det var upp till temaförfattarna och webbplatsägare att uppdatera sina teman eller TimThumb-skript för att inkludera korrigeringen.
Enligt min åsikt var problemet med denna debacle inte på grund av säkerhetshålet själv, men mer på grund av hur denna typ av problem inte lätt kunde lösas på global nivå. Eftersom TimThumb var ett friluftsskript, en tredje part, var det svårt för människor att snabbt ta reda på säkerhetsuppdateringen eller till och med bara få meddelande om att det fanns en säkerhetsfel.
Om en säkerhetsfel av den här nivån hittades i WordPress-kärnan, skulle det dock troligtvis bli patchad med en snabb WordPress-säkerhetsuppdatering och de flesta skulle inte ens vara medvetna om problemet.
Med det sagt kan det vara bättre att använda en WordPress-funktion för att utföra vår bildändring.
Så vi måste släppa TimThumb från våra WordPress-teman. Som temaförfattare på ThemeForest är kanske den mest uppenbara orsaken det TimThumb är inte längre tillåtet med genomförandet av Envatos nya WordPress-temakrav.
Lycklig för oss, när WordPress 3.5 släpptes introducerade vi WP Image Editor-klassen. Den här klassen har några grundläggande funktioner för rotering, beskärning och ändring av bilder. Nu har vi inbyggd bildåterställning inom WordPress!
Förmodligen är en av de bästa funktionerna i WP Image Editor-klassen den stöder både GD och ImageMagick-bibliotek (till skillnad från TimThumb som endast stödde GD). Det innebär att våra teman kan stödja fler WordPress-installationer.
Så här skulle du använda WP_Image_Editor klass:
Accentsconagua
// Retur ett genomförande som utökar WP_Image_Editor $ image = wp_get_image_editor ('cool_image.jpg'); om (! is_wp_error ($ image)) $ image-> resize (400, 300, true); $ image-> save ('new_image.jpg'); WP Image Editor är enkelt, men lite saknar våra avsikter. Du behöver helt klart skapa en egen omslagsfunktion så att du inte behöver använda en massa koden varje gång du vill visa en förstorad bild.
En annan sak att notera är att wp_get_image_editor funktionen accepterar endast en bildfilbana, måste du också lägga till din wrapper-funktion en metod för att konvertera den till din bildadress.
Bortsett från behovet av att skapa en wrapper-funktion, finns det några brister att enkelt ersätta TimThumb med WP_Image_Editor klass:
Det skulle vara trevligt om vi hade något som innehåller funktioner i både WP Image Editor-klassen och TimThumb. Detta är anledningen till att jag skapade manuset BFIThumb.
Jag skulle vilja presentera dig för en ny bildresenär med namnet BFIThumb. BFIThumb gjordes med dessa punkter i åtanke:
WP_Image_Editor att utföra bildmanipulation - Med hjälp av denna WordPress-klass tillåter du mindre fel, eftersom huvuddelen av processen inte utförs av vår egen kod. Det betyder att vi även kan ge resizing för både GD och ImageMagick-bibliotek.src attribut på din img taggar. Den anpassade bildens sökväg skulle returneras av funktionen. Detta möjliggör en mer läsbar kod och enklare övergångstid.WP_Image_Editor och lägger till mer funktionalitet.BFIThumb gjordes för att likna TimThumbs användning. Huvudfunktionen du behöver ringa är bfi_thumb. Liknande TimThumb, använder du den här funktionen i src attribut på din img taggar. Den här funktionen tar in en bildadress tillsammans med en rad parametrar, och returnerar sedan URL för den bearbetade bilden.
Här är den grundläggande användningen av funktionen, uppdelad för att förklara vad som händer:
// Inkludera biblioteket require_once ('BFI_Thumb.php'); // Våra parametrar, gör en resize $ params = array ('width' => 400, 'height' => 300); // Hämta webbadressen till vår bearbetade bild $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Skriv ut vårt img tag echo "
"; För att kunna ändra storlek och beskärning behöver du bara ange nödvändiga parametrar:
"; // Ändra storlek endast efter bredd, höjden kommer att justera till rätt förhållande $ params = array ('width' => 400); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Ändra storlek endast efter höjd, bredden kommer att justera till rätt förhållande $ params = array ('height' => 300); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Ändra storlek efter bredd och höjd och skörda $ params = array ('width' => 400, 'height' => 300, 'crop' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); Bildfiltren är ganska användbara, och om de används korrekt kan du aktivera coola effekter i dina teman. Till exempel, gråskale bildfilter kan användas för att skapa svartvita bilder som blir färgade när de svängs på.
Jag hade också en användning för opacitet filtrera när jag behövde göra bakgrundsbilden ogenomskinlig för att visa lite av bakgrundsfärgen.
// Gråskala $ params = array ('grayscale' => 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); // Ändra opacitet (gör din bild till en PNG) $ params = array ('opacity' => 80); // 80% opaka $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Multipla parametrar $ params = array ('width' => 400, 'height' => 300, 'gråskala' => sant, 'colorize' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params); I den här artikeln lärde vi oss att ta bort vårt beroende av TimThumb och gå vidare mot en mer WordPress-orienterad metod för att utföra bildåterställning med BFIThumb. Med detta tillvägagångssätt kan vi utföra en viss flexibel bildåterställning och även använda några av de bildfilter som vi älskade i TimThumb.
Förhoppningsvis kan det här lilla skriptet hjälpa dig med din övergång från TimThumb. Om du har några förslag på nya funktioner för att göra det här bilden ändra storlek skript, vänligen lämna en kommentar nedan.
Jag uppskattar all feedback, kommentarer och förslag.
Vad ersätter du TimThumb med? Skulle du använda BFIThumb i ditt nästa WordPress-tema? Låt mig veta vad du tycker!
