Weg van TimThumb naar BFIThumb

TimThumb is al jaren een favoriet script voor het wijzigen van de grootte van afbeeldingen voor auteurs van WordPress-thema's. Maar met de nieuwe WordPress Theme Submission Requirements op ThemeForest, moeten we afscheid nemen van TimThumb.

In dit artikel leer je hoe je je thema's kunt overzetten van TimThumb naar een nieuw beeldformaat-script genaamd BFIThumb.

BFIThumb is een open source-project en is beschikbaar op GitHub.

Waarom hebben we TimThumb gebruikt??

Voordat WordPress de mogelijkheid had om het formaat van afbeeldingen flexibel aan te passen, was de enige optie om bibliotheken van derden te gebruiken, zoals TimThumb. Het leuke van TimThumb was dat het vol zat met functies en dat het heel gemakkelijk te gebruiken was.

Je hoefde er niet veel voor te doen om te werken, je zou gewoon het TimThumb-script moeten gebruiken als jouw src attribuut in uw img label en geef het de afbeelding door:

Met slechts die simpele verandering, kunt u:

Verklein de afbeelding
Snij een deel van de afbeelding bij
Pas afbeeldingfilters toe zoals grijswaarden en tint
Cache de gemaakte afbeelding voor toekomstig gebruik

Met deze functies konden we geweldig ogende afbeeldingen maken die niet beperkt waren tot kleine vierkante miniaturen.

Waarom we TimThumb niet meer kunnen gebruiken

Een goede reden is de grote beveiligingsfout in TimThumb die werd ontdekt en weergegeven in versie 1.10. In een notendop was er een lusgat waardoor schadelijke code kon worden uitgevoerd op de servers die een TimThumb-script hosten.

Veel sites zijn hierdoor gehackt - inclusief sommige van mijn eigen - en ook enkele gebruikers van mijn thema's. Hoewel dit in latere versies van TimThumb werd opgelost, waren veel mensen zich zelfs niet bewust van de beveiligingsfout totdat het te laat was. Het was aan het thema van auteurs en site-eigenaren om hun thema's of TimThumb-scripts bij te werken om de fix op te nemen.

Naar mijn mening was het probleem met dit debacle niet vanwege het beveiligingslek zelf, maar meer vanwege hoe dit type probleem niet eenvoudig op een wereldwijde schaal kon worden opgelost. Omdat TimThumb een script van derden was, was het moeilijk voor mensen om snel de beveiligingsupdate te pakken te krijgen, of zelfs om gewoon op de hoogte te worden gebracht dat er een beveiligingsfout bestond.

Als een beveiligingsfout van dit niveau echter in de WordPress-kern werd gevonden, zou deze waarschijnlijk meteen worden hersteld met een snelle WordPress beveiligingsupdate en zouden de meeste mensen zich niet eens bewust zijn van het probleem.

Dat gezegd hebbende, zou het misschien beter zijn om een WordPress-functie te gebruiken om onze afbeelding te vergroten of verkleinen.

Dus, we moeten TimThumb van onze WordPress-thema's verwijderen. Als thema-auteurs op ThemeForest is misschien de meest voor de hand liggende reden dat TimThumb is niet langer toegestaan met de implementatie van Envato's nieuwe WordPress Theme Submission Requirements.

WP Image Editor voor de redding ... Soort

Gelukkig voor ons, toen WordPress 3.5 werd uitgebracht, introduceerde het de WP Image Editor-klasse. Deze klasse heeft enkele basisfuncties voor het roteren, bijsnijden en vergroten of verkleinen van afbeeldingen. Nu hebben we een ingebouwde aanpassing van het formaat binnen WordPress!

Waarschijnlijk een van de beste kenmerken van de WP Image Editor-klasse is dat het ondersteunt zowel GD- als ImageMagick-bibliotheken (in tegenstelling tot TimThumb dat alleen GD ondersteunde). Dit betekent dat onze thema's meer WordPress-installaties kunnen ondersteunen.

Dit is hoe je de WP_Image_Editor klasse:

 // Een implementatie retourneren die WP_Image_Editor $ image = wp_get_image_editor ('cool_image.jpg') verlengt; if (! is_wp_error ($ afbeelding)) $ image-> formaat wijzigen (400, 300, true); $ image-> save ('new_image.jpg');

WP Image Editor Extended

De WP Image Editor is eenvoudig, maar een beetje tekortschietend voor onze intenties. U zult duidelijk uw eigen wrapper-functie moeten maken, zodat u niet elke keer een code hoeft te gebruiken als u een afbeelding met een nieuwe grootte wilt weergeven.

Een ander ding om op te merken is dat de wp_get_image_editor functie accepteert alleen een afbeeldingsbestandspad, u moet ook een methode toevoegen om uw omslagfunctie om te zetten in uw afbeeldings-URL.

Afgezien van de noodzaak om een wrapper-functie te maken, zijn er enkele tekortkomingen om TimThumb eenvoudig te vervangen door de WP_Image_Editor klasse:

Het kan alleen het formaat wijzigen, bijsnijden en opslaan van afbeeldingsbestanden
Geen afbeeldingsfilters
Geen caching van afbeeldingen
Kan afbeeldingen alleen verkleinen en niet vergroten
Zowel de breedte als de hoogte zijn nodig om een wijziging in grootte aan te brengen
Het gebruik verschilt van TimThumb

Het zou leuk zijn als we iets hadden dat functies bevat van zowel de WP Image Editor-klasse als TimThumb. Dit is de reden waarom ik het script BFIThumb heb gemaakt.

Beste van beide werelden: BFIThumb

Ik zou je willen voorstellen aan een nieuwe beeldresolutie genaamd BFIThumb. BFIThumb is gemaakt met deze punten in gedachten:

Gebruik WP_Image_Editor om beeldmanipulatie uit te voeren - Het gebruik van deze WordPress-klasse maakt minder fouten mogelijk, omdat het grootste deel van het proces niet door onze eigen code wordt uitgevoerd. Dit betekent dat we ook het formaat kunnen aanpassen voor zowel GD- als ImageMagick-bibliotheken.
Gelijkaardig gebruik aan TimThumb - Het gebruik van TimThumb is ideaal, omdat je alleen het src kenmerk van uw img -tags. Het pad van de gewijzigde afbeelding wordt door de functie geretourneerd. Dit zorgt voor een beter leesbare code en een eenvoudigere overgangstijd.
Soortgelijke mogelijkheden voor TimThumb - De mogelijkheid om beeldfilters toe te passen was een van de verkoopargumenten van TimThumb. Omdat we een eenvoudige overgang willen, zou het het beste zijn als een aantal van de veelgebruikte beeldfilters nog steeds beschikbaar zijn.

Hoe het werkt

Het script breidt zich uit WP_Image_Editor en voegt meer functionaliteit toe.
Implementeert een meer flexibele resizer waarmee alleen het formaat van de breedte of hoogte kan worden aangepast. Dit is vooral handig in maquette-indelingen, u kunt de breedte van afbeeldingen verkleinen en tegelijkertijd de oorspronkelijke hoogte-breedteverhouding behouden.
De uitgebreide klassen implementeren enkele afbeeldingsfilters die worden gevonden in TimThumb.
Caches verwerkte afbeeldingen in de uploadmap van WordPress voor sneller laden bij toekomstige pagina's.

Hoe te gebruiken

BFIThumb is vergelijkbaar gemaakt met het gebruik van TimThumb. De belangrijkste functie die u moet bellen, is bfi_thumb. Net als bij TimThumb, gebruik je deze functie in de src kenmerk van uw img -tags. Deze functie neemt een afbeeldings-URL samen met een reeks parameters op en retourneert vervolgens de URL van de verwerkte afbeelding.

Hier is het basisgebruik van de functie, uitgesplitst om uit te leggen wat er gebeurt:

 // Neem de library require_once op ('BFI_Thumb.php'); // Onze parameters, wijzig de grootte van $ params = array ('width' => 400, 'height' => 300); // Ontvang de URL van onze verwerkte afbeelding $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Print onze img-tag-echo af "";

Formaat wijzigen en bijsnijden

Als u het formaat en de afmetingen wilt aanpassen, hoeft u alleen de benodigde parameters in te voeren:

 // Formaat wijzigen alleen op breedte, de hoogte past zich aan aan de juiste verhouding $ params = array ('width' => 400); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Alleen vergroten / verkleinen op hoogte, de breedte past zich aan aan de juiste verhouding $ params = array ('height' => 300); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Formaat wijzigen op breedte en hoogte en bijsnijden $ params = array ('width' => 400, 'height' => 300, 'crop' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params);

Afbeeldingsfilters

Afbeeldingsfilters zijn zeer nuttig en kunnen bij correct gebruik coole effecten in uw thema's inschakelen. Bijvoorbeeld de grijstinten afbeeldingsfilter kan worden gebruikt om zwart-witafbeeldingen te maken die worden gekleurd wanneer erop wordt geplaatst.

Ik had ook een gebruik voor de ondoorzichtigheid filter wanneer ik de achtergrondafbeelding ondoorzichtig moest maken om een beetje van de achtergrondkleur te tonen.

 // Grayscale $ params = array ('grijsschaal' => waar); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Colorize $ params = array ('color' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Negeer $ params = array ('negeren' => waar); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Verander de dekking (maakt van je afbeelding een PNG) $ params = array ('opacity' => 80); // 80% ondoorzichtig $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Meerdere parameters $ params = array ('width' => 400, 'height' => 300, 'greyscale' => true, 'colorize' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params);

Conclusie

In dit artikel hebben we geleerd om onze afhankelijkheid van TimThumb te verwijderen en verder te gaan naar een meer op WordPress georiënteerde benadering om beeldgrootte te wijzigen met behulp van BFIThumb. Met deze benadering kunnen we een aantal flexibele afbeeldingsaanpassingen uitvoeren en ook enkele van de afbeeldingsfilters gebruiken die we leuk vonden in TimThumb.

Hopelijk kan dit kleine script je helpen met je overgang van TimThumb. Als je suggesties hebt voor nieuwe functies om deze afbeelding beter te maken met het wijzigen van het script, laat dan een reactie hieronder achter.

Ik stel elke feedback, opmerkingen en suggesties zeer op prijs.

Waarmee vervang je TimThumb? Zou u BFIThumb gebruiken in uw volgende WordPress-thema? Laat me weten wat je denkt!

Code