Kurztipp Verwenden des BFI-Thumb für ausgewählte Bilder in benutzerdefiniertem Format

Als WordPress-Theme-Entwickler können wir ein Theme - oder ein Theme - erstellen, bei dem Bilder eine bestimmte Größe (Abmessungen) haben müssen. Gleichzeitig können wir den Endbenutzern unserer Themen nicht die Verantwortung für die Erstellung derartiger dimensionsspezifischer Bilder übertragen.

Was ist also die Lösung? Der beste Weg, um mit diesem Problem umzugehen, besteht darin, die Funktionalität zum Erstellen von Bildern in benutzerdefinierten Größen im Rahmen unserer Themen zu integrieren.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie die BFI Thumb PHP-Bibliothek verwenden, um dies zu erreichen.

Ausgewählte Bilder

Was sind ausgewählte Bilder

Laut dem WordPress-Codex:

Ein ausgewähltes Bild ist ein Bild, das als repräsentatives Bild für Beiträge, Seiten oder benutzerdefinierte Beitragstypen ausgewählt wird. Die Anzeige dieses Bildes hängt vom Thema ab. Dies ist besonders nützlich für "Magazin-Stil" -Themen, bei denen jeder Beitrag ein Bild hat.

Ausgewählte Bilder wurden Miniaturansichten genannt, bevor der Name geändert wurde. Diese beiden Begriffe werden also austauschbar verwendet.

Aktivieren der Unterstützung für ausgewählte Bilder

Themes müssen ihre Unterstützung für Post-Thumbnails erklären, bevor die Benutzeroberfläche für das Zuweisen dieser Bilder auf den Bildschirmen "Post / Post bearbeiten" angezeigt wird.

Um die Miniaturbild-Unterstützung in Ihrem Design zu aktivieren, fügen Sie Ihrem Piktogramm die folgende Zeile hinzu Functions.php Datei:

 

Post-Miniaturansichten in Ihrem Thema anzeigen

Fügen Sie den folgenden Code an einer geeigneten Stelle in Ihrer spezifischen Vorlagendatei ein, um Miniaturbilder des Beitrags in Ihrem Design anzuzeigen:

 

Der obige Code prüft, ob der Beitrag vor dem Aufruf der Funktion eine Miniaturansicht enthält, um sie anzuzeigen.

Die Funktion add_image_size ()

Das add_image_size () Mit dieser Funktion können Sie neue Bildgrößen für Post-Miniaturbilder registrieren.

Standardmäßig erstellt WordPress die folgenden Bildgrößen, wenn ein Benutzer der Medienbibliothek ein Bild hinzufügt:

  • Vorschaubild - (max. 150 x 150 x x)  
  • mittel - (300px x 300px)
  • groß - (640px x 640px)
  • full - Originalgröße hochgeladen 

Registrieren der neuen Bildgröße

Um neue Bildgrößen zu registrieren, verwenden wir die add_image_size () Funktion wie folgt:


 

Parameter:

  • $ name - (Schnur) (erforderlich) Der neue Name der Bildgröße. Standard: Keiner
  • $ width - (int) (optional) Die Breite der Miniaturansicht in Pixeln. Voreinstellung: 0 
  • $ Höhe - (int) (optional) Die Höhe der Miniaturansicht in Pixeln. Voreinstellung: 0 
  • $ crop - (boolean / array) (optional)

Verwendungsbeispiel

 

Um die neu registrierten Bildgrößen in Ihrem Design anzuzeigen, übergeben Sie einfach den Namen Ihrer benutzerdefinierten Bildminiatur the_post_thumbnail () Funktion wie folgt:


 

Einführung in BFI Thumb

BFI Thumb ist eine PHP-Klasse oder -Bibliothek, die als On-the-Fly-Bild-Resizer / Cropper / Grayscaler / Colorizer / Opacitor für WordPress von Benjamin Intal fungiert

Installation und Integration

1. Laden Sie BFI thumb von GitHub herunter und speichern Sie es im Stammverzeichnis Ihres Themes.

2. Fügen Sie Ihrem Design die folgende Zeile hinzu Functions.php Datei:

 

3. Verwenden Sie die folgende Funktion, wo immer Sie ein Bild in benutzerdefinierten Größen anzeigen möchten:

 400, "Höhe" => 300); bfi_thumb ("URL-to-image.jpg", $ params); ?> 

Wenn Sie die obige Funktion betrachten ( bfi_thumb () ), werden Sie feststellen, dass die URL des zu ändernden Bildes als erster Parameter verwendet wird, gefolgt von den anderen Parametern (Bildabmessungen). Sie müssen sich also fragen, wie wir die URL unserer Miniaturansicht bestimmen?

Um die URL eines Post-Thumbnails zu ermitteln, verwenden wir eine Funktion namens wp_get_attachment_image_src () Dabei werden die Anhangs-ID, die Größe und ein optionales Symbol als Parameter verwendet.

Also gehen wir vorbei get_post_thumbnail_id () Funktion als erster Parameter. Es braucht die Beitrags-ID als Parameter und gibt das zurück ICH WÜRDE des gekennzeichneten Bildes, das dem Beitrag beigefügt ist.

Der zweite Parameter ist Größe Hierbei kann es sich entweder um ein Zeichenfolge-Schlüsselwort (Miniaturansicht, mittlere, große oder vollständige Zeichenfolge) handeln. Sie können alle benutzerdefinierten Bildgrößen verwenden, die Sie mit der Option add_image_size () Funktion oder ein Array mit zwei Elementen, das Breite und Höhe in Pixel darstellt. Um jedoch sicherzustellen, dass unser Bild in Benutzergröße die höchste Qualität aufweist, verwenden wir die Originalgröße - voll.

 Inzwischen sollte unser Code ungefähr so ​​aussehen:

 400, "Höhe" => 300); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); bfi_thumb ($ imgsrc [0], $ params);?> 

wp_get_attachment_image_src () gibt ein geordnetes Array mit Werten zurück, die der URL (0), (1) Breite, (2) Höhe und (3) der Skalierung eines Bildanhangs entsprechen (oder eines Symbols, das einen Anhang darstellt)..

Wir sind aber nur an dem ersten zurückgegebenen Parameter interessiert - dem URL. Wir übergeben es an die bfi_thumb () Funktion zusammen mit unseren anderen Parametern (Breite und Höhe), um ein Bild in benutzerdefinierten Größen zu erhalten.

Einpacken in eine Funktion

Da wir diesen Code wahrscheinlich immer wieder in unserem Thema - oder Themen - verwenden werden, fassen wir ihn in einer Funktion zusammen.


 $ image_width, 'height' => $ image_height); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); $ custom_img_src = bfi_thumb ($ imgsrc [0], $ params); Rückgabe $ custom_img_src;?>

Speichern Sie diese Datei in Ihrem Functions.php Datei.

Verwendungszweck

Für Bilder:

Oder für Hintergrundbilder:

Vorteile von benutzerdefinierten Bildern gegenüber Miniaturansichten

Bilder in benutzerdefinierten Größen, die direkt mit einer Bibliothek wie BFI Thumb erstellt werden, haben die folgenden Vorteile gegenüber benutzerdefinierten Miniaturansichten, die mit erstellt wurden add_image_size () Funktion:

  •  the_post_thumbail () Funktionen gibt ein Bild-Tag aus. Manchmal möchten Sie die URL des Bildes. Ein Beispiel wäre, wo Sie das Bild als Hintergrund verwenden möchten.
  • Benutzerdefinierte Bildgrößen, die mit registriert wurden add_image_size () gilt nicht für ältere Bilder, die hochgeladen wurden, bevor die Bildgröße registriert wurde
  • BFI Thumb kann Bilder sowohl nach oben als auch nach unten verändern
  • BFI Thumb verfügt außerdem über zusätzliche Funktionen wie: Graustufen, Farbe (Einfärben), Deckkraft, Negieren

Fazit

In diesem kurzen Tipp haben wir uns die vorgestellten Bilder angesehen - was sie sind und wie wir sie in unseren Themen verwenden können. Wir haben uns auch die angeschaut add_image_size () Funktion, um zu sehen, wie wir damit benutzerdefinierte Bildgrößen hinzufügen können, wenn ein Bild in die Medienbibliothek hochgeladen wird.

Wir haben die BFI THumb PHP-Bibliothek vorgestellt und gezeigt, wie wir aus einem Post-Thumbnail oder einem Bild ein Bild in benutzerdefinierten Größen erstellen können.

Wir haben uns dann die Einschränkungen der Verwendung angesehen add_image_size () So erstellen Sie benutzerdefinierte Bildgrößen und die Vorteile, die BFI Thumb darüber hat.

Fügen Sie diese Funktion Ihrem hinzu Functions.php Datei und verwenden Sie sie immer dann, wenn Sie aus einem Miniaturbild ein benutzerdefiniertes Bild erstellen müssen.