Weg von TimThumb nach BFIThumb

TimThumb ist seit langem ein beliebtes Skript zur Bildgrößenänderung für WordPress-Designautoren. Aber mit den neuen WordPress Theme-Einreichungsanforderungen für ThemeForest müssen wir uns von TimThumb verabschieden.

In diesem Artikel erfahren Sie, wie Sie Ihre Motive von TimThumb wegführen und in ein neues Bildgrößenänderungsskript namens BFIThumb umwandeln.

BFIThumb ist ein Open Source-Projekt und steht auf GitHub zur Verfügung.

Warum haben wir TimThumb verwendet??

Bevor WordPress die Möglichkeit hatte, die Größe der Bilder flexibel anzupassen, bestand die einzige Möglichkeit darin, Bibliotheken von Drittanbietern wie TimThumb zu verwenden. Das Schöne an TimThumb war, dass es viele Funktionen enthielt und es sehr einfach zu bedienen war.

Sie mussten nicht viel tun, damit es funktioniert, Sie müssten lediglich das TimThumb-Skript als Ihr Skript verwenden src Attribut in Ihrem img tag und Bild übergeben:

Mit dieser einfachen Änderung könnten Sie:

Ändern Sie die Größe des Bildes
Beschneiden Sie einen Teil des Bildes
Wenden Sie Bildfilter wie Graustufen und Farbtöne an
Zwischenspeichern Sie das erstellte Bild für die zukünftige Verwendung

Dank dieser Funktionen konnten wir fantastisch aussehende Bilder erstellen, die nicht auf kleine quadratische Miniaturansichten beschränkt waren.

Warum wir TimThumb nicht mehr verwenden können

Ein guter Grund ist der schwerwiegende Sicherheitsfehler in TimThumb, der in Version 1.10 entdeckt und entdeckt wurde. Kurz gesagt, es gab eine Lücke, durch die bösartiger Code auf den Servern ausgeführt werden konnte, auf denen ein TimThumb-Skript gehostet wurde.

Aus diesem Grund wurden viele Websites gehackt - darunter auch einige meiner eigenen - und auch Benutzer einiger meiner Themen. Obwohl dies in späteren Versionen von TimThumb behoben wurde, waren sich viele Menschen der Sicherheitslücke erst bewusst, als es zu spät war. Es lag an den Designautoren und Websitebesitzern, ihre Designs oder TimThumb-Skripts zu aktualisieren, um den Fix einzuschließen.

Meines Erachtens lag das Problem bei diesem Debakel nicht an der Sicherheitslücke selbst, sondern eher daran, dass dieses Problem auf globaler Ebene nicht ohne weiteres behoben werden konnte. Da es sich bei TimThumb um ein fremdes Skript von Drittanbietern handelte, war es für die Benutzer schwierig, sich schnell an das Sicherheitsupdate zu gewöhnen oder auch nur zu erfahren, dass ein Sicherheitsfehler vorhanden war.

Wenn im WordPress-Kern ein Sicherheitsfehler dieser Stufe gefunden wurde, würde er höchstwahrscheinlich sofort mit einem schnellen WordPress-Sicherheitsupdate gepatcht werden, und die meisten Leute würden das Problem nicht einmal bemerken.

Nachdem dies gesagt wurde, ist es möglicherweise besser, eine WordPress-Funktion zu verwenden, um die Bildgröße zu ändern.

Also müssen wir TimThumb von unseren WordPress-Themes entfernen. Als Themenautoren bei ThemeForest ist dies vielleicht der offensichtlichste Grund TimThumb ist nicht mehr erlaubt mit der Einführung der neuen Envato-Anforderungen für das WordPress-Theme.

WP Image Editor zur Rettung… Art Of

Zum Glück für uns, als WordPress 3.5 veröffentlicht wurde, wurde die WP Image Editor-Klasse eingeführt. Diese Klasse verfügt über einige grundlegende Funktionen zum Drehen, Zuschneiden und Ändern der Größe von Bildern. Jetzt haben wir eingebaute Bildgrößenanpassung in WordPress!

Wahrscheinlich ist eines der besten Features der WP Image Editor-Klasse das unterstützt sowohl GD- als auch ImageMagick-Bibliotheken (Im Gegensatz zu TimThumb, das nur GD unterstützte). Das bedeutet, dass unsere Designs mehr WordPress-Installationen unterstützen können.

So würden Sie das verwenden WP_Image_Editor Klasse:

 // Eine Implementierung zurückgeben, die WP_Image_Editor erweitert. $ Image = wp_get_image_editor ('cool_image.jpg'); if (! is_wp_error ($ image)) $ image-> resize (400, 300, true); $ image-> save ('new_image.jpg');

WP Image Editor erweitert

Der WP Image Editor ist simpel, fehlt aber unseren Absichten etwas. Sie müssen natürlich eine eigene Wrapper-Funktion erstellen, damit Sie nicht jedes Mal eine Menge Code verwenden müssen, wenn Sie ein verkleinertes Bild anzeigen möchten.

Eine andere Sache ist, dass die wp_get_image_editor Die Funktion akzeptiert nur einen Bilddateipfad. Sie müssen außerdem eine Methode in Ihre Wrapper-Funktion hinzufügen, um sie in Ihre Bild-URL zu konvertieren.

Abgesehen von der Notwendigkeit, eine Wrapper-Funktion zu erstellen, gibt es einige Nachteile, wenn Sie TimThumb mit der WP_Image_Editor Klasse:

Es kann nur die Größenänderung, das Zuschneiden und das Speichern von Bilddateien durchführen
Keine Bildfilter
Kein Bild-Caching
Bilder können nur nach unten und nicht nach oben verkleinert werden
Sowohl für die Breite als auch für die Höhe ist eine Größenänderung erforderlich
Die Verwendung unterscheidet sich von TimThumb

Es wäre schön, wenn wir etwas hätten, das sowohl die Funktionen der WP Image Editor-Klasse als auch TimThumb enthält. Aus diesem Grund habe ich das Skript BFIThumb erstellt.

Das Beste aus zwei Welten: BFIThumb

Ich möchte Ihnen einen neuen Image Resizer namens BFIThumb vorstellen. BFIThumb wurde unter Berücksichtigung dieser Punkte erstellt:

Benutzen WP_Image_Editor Bildmanipulation durchführen - Die Verwendung dieser WordPress-Klasse ermöglicht weniger Fehler, da der Großteil des Prozesses nicht von unserem eigenen Code ausgeführt wird. Dies bedeutet, dass wir auch eine Größenanpassung für GD- und ImageMagick-Bibliotheken bereitstellen können.
Ähnlich wie TimThumb - Die Verwendung von TimThumb ist ideal, da Sie nur das ändern müssen src Attribut von Ihrem img Stichworte. Der Pfad des angepassten Bildes würde von der Funktion zurückgegeben. Dies ermöglicht einen besser lesbaren Code und eine einfachere Übergangszeit.
Ähnliche Funktionen wie TimThumb - Die Möglichkeit, Bildfilter anzuwenden, war eines der Verkaufsargumente von TimThumb. Da wir einen einfachen Übergang wünschen, wäre es am besten, wenn einige der üblicherweise verwendeten Bildfilter noch verfügbar wären.

Wie es funktioniert

Das Skript wird erweitert WP_Image_Editor und fügt mehr Funktionalität hinzu.
Implementiert eine flexiblere Größenanpassung, mit der nur die Breite oder Höhe angepasst werden kann. Dies ist besonders in Masonry-Layouts hilfreich. Sie können die Bildbreite verkleinern und dabei das ursprüngliche Höhenverhältnis beibehalten.
Die erweiterten Klassen implementieren einige in TimThumb gefundene Bildfilter.
Caches verarbeitete Bilder werden in WordPress 'Uploads-Ordner gespeichert, um das Laden von Seiten künftig zu beschleunigen.

Wie benutzt man es?

BFIThumb wurde so gestaltet, dass es TimThumbs Verwendung ähnelt. Die Hauptfunktion, die Sie aufrufen müssen, ist bfi_thumb. Ähnlich wie bei TimThumb verwenden Sie diese Funktion im src Attribut von Ihrem img Stichworte. Diese Funktion nimmt eine Bild-URL zusammen mit einem Array von Parametern auf und gibt dann die URL des verarbeiteten Bildes zurück.

Hier ist die grundlegende Verwendung der Funktion, um zu erklären, was passiert:

 // Include the library required_once ('BFI_Thumb.php'); // Unsere Parameter, ändern Sie die Größe von $ params = array ('width' => 400, 'height' => 300); // Hole die URL unseres verarbeiteten Bildes $ image = bfi_thumb ('URL-to-image.jpg', $ params); // unser echo img tag ausdrucken "";

Größe ändern und zuschneiden

Zum Ändern der Größe und zum Zuschneiden müssen Sie nur die erforderlichen Parameter eingeben:

 // Nur die Breite ändern, die Höhe wird im richtigen Verhältnis angepasst. $ Params = array ('width' => 400); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Nur Größe ändern, die Breite wird im richtigen Verhältnis angepasst. $ Params = array ('height' => 300); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Größe und Breite ändern und Größe zuschneiden $ params = array ('width' => 400, 'height' => 300, 'crop' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params);

Bildfilter

Bildfilter sind sehr hilfreich und können bei korrekter Verwendung coole Effekte in Ihren Designs aktivieren. Zum Beispiel die Graustufen Bildfilter können verwendet werden, um Schwarzweißbilder zu erstellen, die beim Schweben mit der Maus farbig werden.

Ich hatte auch eine Verwendung für die Opazität filtern, wenn das Hintergrundbild undurchsichtig gemacht werden muss, um ein wenig der Hintergrundfarbe anzuzeigen.

 // Graustufen $ params = array ('Graustufen' => 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); // Deckkraft ändern (macht aus Ihrem Bild eine PNG-Datei) $ params = array ('opacity' => 80); // 80% undurchsichtiges $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Mehrere Parameter $ params = array ('width' => 400, 'height' => 300, 'Graustufen' => true, 'colorize' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params);

Fazit

In diesem Artikel haben wir gelernt, wie wir unsere Abhängigkeit von TimThumb entfernen und zu einem eher auf WordPress ausgerichteten Ansatz zur Bildgrößenänderung mit BFIThumb übergehen können. Mit diesem Ansatz können wir einige flexible Bildgrößenanpassungen vornehmen und einige der Bildfilter verwenden, die wir in TimThumb geliebt haben.

Ich hoffe, dieses kleine Skript kann Ihnen beim Übergang von TimThumb helfen. Wenn Sie Vorschläge für neue Funktionen zur Verbesserung der Bildgröße des Skripts haben, hinterlassen Sie bitte einen Kommentar.

Ich freue mich über jedes Feedback, Kommentare und Vorschläge.

Womit ersetzst du TimThumb? Würden Sie BFIThumb in Ihrem nächsten WordPress-Theme verwenden? Lass mich wissen was du denkst!

Code