Zeigt den HTML-Code für das Miniaturbild des aktuellen Beitrags an.
Dieses Template-Tag sollte innerhalb der WordPress-Schleife verwendet werden.
Über add_image_size() kann eine zusätzliche Größe des Bildes erstellt werden, die dann über diese Funktion ermittelt werden kann. Standardmäßig sind die folgenden Größen verfügbar: Miniaturansicht, mittel, groß, vollständig, Post-Miniaturansicht.
✈ 1 Mal = 0,001739s = So langsam| 50000 Mal = 6,79 s = schnell| PHP 7.1.2, WP 4.7.3
Es gibt keine Haken.
Kehrt zurück
null (nichts). Gibt eine Zeichenfolge auf dem Bildschirm aus. Die Funktion zeigt den HTML-Code des Bildes oder einen leeren Wert (null) an, wenn das Bild nicht existiert.
Verwendung
$Größe (String/Array)Die Größe des zu empfangenden Miniaturbilds. Kann eine Zeichenfolge sein: thumbnail , medium , large , full oder ein Array aus zwei Elementen (Bildbreite und -höhe): array(32, 32) .
Wenn ein Array angegeben wird, wird kein neues Miniaturbild mit den angegebenen Abmessungen erstellt. Und WP sucht aus den bereits vorhandenen Größen die passendste heraus, nimmt sie und gibt einfach die Höhe und Breite in Pixeln für das IMG-Tag an, um das Bild zu verkleinern. Diese. Das Bild wird lediglich optisch verkleinert.
Standard: „post-thumbnail“, die Größe, die mit set_post_thumbnail_size() für das Theme festgelegt wird
$attr (String/Array)
Ein Array von Attributen, die dem resultierenden HTML-IMG-Tag hinzugefügt werden sollen.
Sie können es als Zeile angeben: alt=alt&class=alignleft oder als Array:
$default_attr = array("src" => $src, "class" => "attachment-$size", "alt" => trim(strip_tags($wp_postmeta->_wp_attachment_image_alt)),);
Es können beliebige Attribute angegeben werden.
Default: ""
Beispiele
#1 Miniaturansicht als Link zu einem Beitrag
Beispiel 1: Verwenden Sie den folgenden Code, um aus einem Miniaturbild einen Link zu einem Beitrag zu machen. Beispiel für die Verwendung innerhalb einer WordPress-Schleife:
" title="(!SPRACHE:!}" >
#2: Machen Sie aus der Miniaturansicht einen Link zum Beitrag
Dazu verwenden wir den Hook post_thumbnail_html. In diesem Fall stellt das Bild sofort einen Link zum Beitrag dar, wenn die Funktion the_post_thumbnail() aufgerufen wird; . Der Code muss der Vorlagendatei hinzugefügt werden Funktionen.php:
Add_filter("post_thumbnail_html", "my_post_image_html", 10, 3); Funktion my_post_image_html($html, $post_id, $post_image_id) ( $html = "" . $html . ""; return $html; )
#3 Miniaturansicht – Link zur Originalgröße
Ein Beispiel, das zeigt, wie man eine Miniaturansicht erstellt, die auf die Originalgröße des Bildes verweist:
#4 Registrieren einer neuen Größe
Sie können add_image_size() verwenden, um eine neue Größe zu registrieren und diese dann per Schlüssel abzurufen:
// Nehmen wir an, wir registrieren in „functions.php“ eine zusätzliche Größe wie diese: add_image_size("spec_thumb", 360, 240, true); // weiter in der Schleife zeigen wir diese Größe wie folgt an: the_post_thumbnail("spec_thumb");
Um das Thema WordPress-Miniaturansichten fortzusetzen, möchte ich mir ein sehr nützliches Plugin ansehen, das die Arbeit in manchen Situationen erheblich erleichtern kann. Stellen Sie sich vor, Sie bloggen seit mehreren Jahren, sagen wir, Sie haben irgendwo im Jahr 2009 angefangen und möchten nun das Erscheinungsbild (Vorlage) modernisieren, indem Sie der Website moderne Optionen hinzufügen, beispielsweise dieselben. Wenn man bedenkt, dass die Unterstützung für Miniaturansichten in WordPress erst viel später eingeführt wurde, befinden sich Ihre Bilder offenbar im Artikel direkt im Text.
Es stellt sich heraus, dass Sie zwei Möglichkeiten haben, das Problem zu lösen: Verwenden Sie es oder erstellen Sie manuell Miniaturansichten für jeden Artikel. Im ersten Fall entsteht das Gefühl einer „erzwungenen“ und nicht ganz optimalen Lösung, im zweiten Fall kann es sogar sein, dass Sie 4-5 Stunden lang mit Bildern herumhantieren müssen. Glücklicherweise habe ich kürzlich eine dritte Option gefunden – Auto-Post-Thumbnail-Plugin.
Mit diesem Modul können Sie Miniaturansichten aus dem ersten Bild im Text für beliebige Blog-Beiträge oder benutzerdefinierte Beitragstypen generieren. Wenn das erste Bild nicht gefunden wird, setzt das Plugin die Suche automatisch fort, bis ein Miniaturbild erstellt wird. Für den Fall, dass Miniaturansichten bereits für die Aufnahme eingestellt sind, passiert einfach nichts. Kurz gesagt, das Funktionsprinzip ist äußerst einfach und logisch. Wenn Sie übrigens aus irgendeinem Grund die Bildung eines Miniaturbilds für einen bestimmten Beitrag verbieten möchten, erstellen Sie im entsprechenden Beitrag ein benutzerdefiniertes Feld (benutzerdefiniertes Feld) „skip_post_thumb“.
Die Installation des Plugins ist einfach und erfolgt im Ganzen: die klassische Methode, indem man die Moduldateien von der offiziellen Website herunterlädt, entpackt und auf FTP im Verzeichnis /wp-content/plugins/ hochlädt, gefolgt von der Aktivierung im Verzeichnis „Plugins ” Abschnitt aus dem Admin-Panel; oder suchen Sie im Menüpunkt „Plugin hinzufügen“ nach einem Modul namens „Auto Post Thumbnail“, wo Sie es herunterladen und aktivieren. Das ist alles!
Nach der Installation haben Sie einen neuen Menüpunkt - Automatisches Post-Thumbnail, wo es zum Starten nur eine Schaltfläche gibt: Miniaturansichten generieren. Es gibt auch einen Hinweis, den ich oben erwähnt habe: Vor dem Start werden Sie aufgefordert, benutzerdefinierte Skip_post_thumb-Felder für Beiträge festzulegen, in denen Sie nichts generieren möchten. Wenn keine vorhanden sind, klicken Sie einfach auf die Schaltfläche.
Über den Bearbeitungsfortschritt aller Blogbeiträge werden Sie über eine spezielle Statusleiste informiert. Sobald die Bearbeitung abgeschlossen ist, erhalten Sie eine entsprechende Benachrichtigung. Beim Ändern wird eine ähnliche automatische Generierung von Miniaturansichten durchgeführt, für diese Zwecke werden jedoch Miniaturansichten neu generieren verwendet.
Sie können die Beiträge durchgehen, um sicherzustellen, dass dieses Plugin ordnungsgemäß funktioniert. Ich empfehle Ihnen außerdem, das Erscheinungsbild des Blogs und die korrekte Darstellung der Beiträge zu überprüfen. Es besteht die Möglichkeit, dass Sie für die ausgewählte WordPress-Vorlage standardmäßig die Miniaturansichtsanzeige in Ihrem Code hinzugefügt haben. Das Ergebnis sieht etwa so aus (wenn sowohl das Bild aus dem Beitrag als auch das Miniaturbild angezeigt werden):
Das erste, woran Sie vielleicht denken, ist, dass Sie Bilder aus Beiträgen entfernen müssen. Aber beeilen Sie sich damit nicht, sonst entsteht wieder zusätzliche Arbeit – Sie könnten das Plugin zunächst nicht starten, sondern alle Blog-Artikel manuell durchgehen und das Bild in ein Miniaturbild ändern. Um diese Fehler zu beheben, werden wir lediglich einige Änderungen an der Vorlage vornehmen.
Öffnen Sie zunächst die Dateien, die für die Anzeige der Liste der Blog-Beiträge verantwortlich sind – index.php, home.php oder archive.php, catagory.php, tag.php, wo wir die Textanzeigefunktion finden der Inhalt(Ich habe es im Beitrag darüber erwähnt) und ändern Sie es in:
Dieser Code zeigt eine kurze Ankündigung eines Blogbeitrags ohne Hervorhebung oder Bilder nur in Textform an. Weiter in der Vorlagendatei zur Anzeige des Volltextes der Notiz (single.php) finden wir dagegen die Miniaturbildfunktion the_post_thumbnail und löschen sie. Typischerweise erfolgt die Ausgabe mit folgendem Code:
| "alignleft post_thumbnail" ) ); ) ?> |
"alignleft post_thumbnail")); ) ?>
Als Ergebnis sollte sich herausstellen, dass auf allen Seiten mit Nachrichtenlisten Miniaturansichten + Kurztext angezeigt werden und vollständige Beiträge alle Designs und Bilder anzeigen, die Sie im Editor festlegen. Die Lösung ist meiner Meinung nach recht flexibel und das Auto Post Thumbnail-Plugin funktioniert großartig! Übrigens, wenn Sie Websites kaufen und manchmal offensichtliche GS in mehr oder weniger schöne Projekte umwandeln müssen, wird dieses Modul auf jeden Fall nützlich sein – das kann ich aus eigener Erfahrung sagen. Grundsätzlich gibt es zwar eine andere Möglichkeit, das Problem zu lösen – allerdings gibt es mehr Code und man muss sich besser darin zurechtfinden.
Auf vielen Blogs finden Sie neben der Beschreibung von Beiträgen ein kleines (großes) Miniaturbild, das den Inhalt des Beitrags vermitteln soll. Bis vor einiger Zeit war es nicht einfach, so etwas zu schaffen. Mit der Einführung von Wordpress 2.9 ist dies viel einfacher geworden.
In diesem Tutorial zeige ich Ihnen, wie Sie Ihren Wordpress-Designvorlagen ähnliche Funktionen hinzufügen.
AufnahmePost-Thumbnail Funktionen in Vorlagen
Das Einschalten ist sehr einfach. Sie müssen lediglich eine Zeile in die Datei „functions.php“ einfügen:
Add_theme_support("post-thumbnails");
Miniaturansichten in Beiträge einfügen
Wenn Sie zum Admin-Bereich gehen, um einen neuen Beitrag zu schreiben, sollte am Seitenrand ein neuer Abschnitt angezeigt werden.
Beachten Sie, dass die neue Abteilung möglicherweise nicht sichtbar ist und Sie etwas tiefer gehen müssen. Nach dem Klicken Miniaturansicht festlegen Es erscheint ein neues Dialogfeld
Klicken Sie auf Als Miniaturansicht verwenden und Ihrer Nachricht wird eine Miniaturansicht hinzugefügt:
Miniaturansichten anzeigen
Nachdem wir die Nachrichten geschrieben haben, fügen wir sie hinzu. Damit die Miniaturansicht angezeigt wird, müssen Sie der Schleife eine Zeile hinzufügen Wordpress. Öffnen Sie die Datei index.php und füge Folgendes hinzu:
Dadurch können Sie ein Bild mithilfe von Klassen anzeigen attachment-post-thumbnail und wp-post-image. C Mithilfe dieser Klassen können wir das Erscheinungsbild der Miniaturansichten gestalten CSS. Im Bild unten sehen wir eine Miniaturansicht mit Rand und Polsterung.
Im Bild oben ist das Miniaturbild ziemlich groß. Die Größe kann über das Admin-Panel geändert werden Einstellungen > Medien.
Eine andere Möglichkeit, die Größe der Miniaturansicht zu bestimmen, besteht darin, die Datei zu ändern Funktionen.php. Dazu müssen wir eine weitere Zeile hinzufügen:
Add_theme_support("post-thumbnails"); set_post_thumbnail_size(588, 250, true);
Jetzt müssen wir berichten Wordpress, damit diese Größe verwendet wird. Wir müssen unseren Zyklus leicht ändern index.php:
Jetzt weiß Wordpress genau, welche Version des Miniaturbilds verwendet werden soll. Das haben wir bekommen:
Fügen wir nun noch etwas PHP zur Datei single.php hinzu, sodass beim Öffnen einer Nachricht die Miniaturansicht ganz oben angezeigt wird:
Weitere Miniaturbildgrößen hinzufügen
Wenn Sie möchten, dass die Miniaturansichten auf der Hauptseite eine Größe haben und auf der Nachrichtenseite selbst eine andere Größe, müssen Sie Folgendes tun.
Die Idee ist folgende: Wir möchten, dass die Beitragsseite ein großes Bild und die Hauptseite ein kleines Bild hat. Dazu müssen wir der Funktionsdatei eine weitere Miniaturbildgröße hinzufügen:
Add_image_size("loopThumb", 588, 125, true);
Beschreibung der Argumente:
Loopthumb- Name der neuen Miniaturbildgröße
- 588 - Breite in Pixel
- 125 - Höhe
-
WAHR - Einstellung, die erzählt Wordpress Sollte ich Engine-Tools verwenden, um die Größe des Bildes zu ändern?
Wir müssen unseren Code in der Datei ändern index.php:
Es ist auch erwähnenswert, dass wir zwei neue Stile haben werden, um das Erscheinungsbild der Miniaturansicht in der neuen Größe zu steuern: A ttachment-loopThumb und wp-post-image. Es kann nützlich sein, auf die Klasse zu verweisen wp-post-image im Stylesheet oder fügen Sie Ihre eigene Klasse hinzu, wenn Sie auf die Miniaturansicht zugreifen:
„loopyThumbs“)); ?>
Dadurch wird ein img-Tag mit den folgenden Klassen erstellt: loopyThumbs und wp-post-image.
Nehmen wir an, wir möchten quadratische Miniaturansichten erstellen, dann müssen wir eine neue Größe erstellen:
Add_image_size("squareThumb", 125, 125, true);
Außerdem möchten Sie möglicherweise, dass sich die Miniaturansicht links befindet und rechts etwas Abstand hat:
Anhang-Post-Miniaturansicht ( float: left; margin-right: 10px; )
Jetzt ändern wir den Code in index.php um unseren Platz anzuzeigen:
Das bekommen wir:
Wenn Sie zuvor hochgeladene Bilder als Miniaturansichten hinzufügen, erhalten Sie möglicherweise Quadrate, die nicht ganz gerade sind. Dies passiert, weil beim Laden von Bildern Wordpress Ich konnte nicht vorhersehen, dass man in Zukunft quadratische Miniaturen verwenden würde.
Aber in dieser Situation gibt es einen Ausweg. Das Plugin wird uns helfen Miniaturansichten neu generieren. Melden Sie sich nach der Installation des Plugins an Extras > Regenerieren und generieren neue Miniaturen ( Alle Miniaturansichten neu generieren ). Danach werden wir gerade Quadrate haben.
Und denken Sie daran: Um Miniaturansichten anzuzeigen, müssen Sie über diese verfügen Wordpress 2.9.
Hoffnung, Hat dir die Lektion gefallen? Bis zum nächsten Mal!
Vor nicht allzu langer Zeit, als ich in der Programmierwelt noch ganz am Anfang stand, arbeitete ich an diesem Winterabend an meinem ersten WordPress-Template. Ich musste die Anzeige von Miniaturansichten für Beiträge konfigurieren. Zu diesem Zeitpunkt hatte ich bereits einige WordPress-Vorlagen kennengelernt, die diese Aufgabe umsetzten. Und es wurde wahrscheinlich mithilfe eines Ihnen bekannten Skripts implementiert timthumb.php(erstellt eine kleine Kopie des Bildes unter Verwendung des übermittelten Links zu demselben Bild). Natürlich habe ich dieses Skript irgendwann der Vorlage beigefügt und war mit dem Ergebnis zufrieden, aber es hielt nicht lange.
Alles hat gut funktioniert: Sie fügen ein Bild in den Beitrag ein, brechen den Link dazu und fügen es einem speziell erstellten benutzerdefinierten Feld hinzu. In der Vorlage wird der Link aus diesem Feld gelesen und daraus ein Miniaturbild erstellt. Aber nach einiger Zeit wurde das ständige Kopieren eines Links und das Hinzufügen zu einem benutzerdefinierten Feld für mich zu einer mühsamen Aufgabe – einer Routine. Außerdem kam es vor, dass ich völlig vergessen hatte, diesen berüchtigten Link einzufügen, und nach der Veröffentlichung musste ich den Beitrag erneut bearbeiten. Klingt bekannt?
Am Ende habe ich eine Funktion geschrieben, die nach einem Bild in einem Beitrag sucht, den Link daraus ausschneidet und ein benutzerdefiniertes Feld für diesen Beitrag erstellt, alles automatisch. Später wurden an dieser Funktion einige Änderungen vorgenommen, und das Ergebnis war ein Plugin, das Sie unten ansehen können.
Über das WordPress-Thumbnail-Plugin
Nach der Aktivierung führt das Plugin nichts aus. Damit es funktioniert, müssen Sie die Vorlage bearbeiten (Funktionen an der Stelle aufrufen, an der Bildminiaturen benötigt werden). Wenn Sie das Plugin nur installieren und aktivieren, wird es nichts bewirken!
Im Allgemeinen ist das Skript timthumb.php sehr ähnlich, aber es ist in einigen Punkten anders und besser:
- Es ist nicht erforderlich, manuell ein benutzerdefiniertes Feld mit einem Link zum Bild zu erstellen. Das Feld wird automatisch erstellt.
- Es arbeitet etwas schneller als timthumb.php (timthumb.php ist ein universelles Skript und daher gibt es viele unnötige Prüfvorgänge);
- Der Link zum Bild sieht gültig aus /images/filename.jpg und nicht /functions.php?src=/images/filename.jpg&w=100&h=100&q=80;
- Der Cache wird nach Bedarf geleert. In timthumb.php wird der Cache ständig überprüft und alte Dateien gelöscht. Es werden Ressourcen für die Überprüfung aufgewendet (eine kleine Sache, aber immer noch). Hier können Sie problemlos Geld sparen;
- Die Größenänderung kann direkt im Beitrag vorgenommen werden, indem die Miniklasse und die erforderlichen Abmessungen des Bildes angegeben werden.
- Die Verwendung ist viel komfortabler, wenn es in ein WordPress-Theme integriert ist: Sie müssen nicht den Wert eines benutzerdefinierten Felds abrufen, sondern prüfen, ob das Feld vorhanden ist, um ein Platzhalterbild anzuzeigen. All dies geschieht automatisch.
- Es gibt viele Hackerangriffe auf timthumb.php, die, wenn sie das Hacken der Website nicht zulassen, unnötige Aufmerksamkeit von Hackern auf sich ziehen und den Server belasten.
So funktioniert Kama Thumbnail
Erstellt einen Cache-Ordner: wp-content/cache/thumb. Darin werden Miniaturen entstehen.
Beim Veröffentlichen oder Aktualisieren eines Beitrags sucht das Plugin nach einem Link zum Originalbild und schreibt ihn in ein benutzerdefiniertes Feld des Beitrags. Anschließend wird mithilfe dieses Links ein Miniaturbild im Thema erstellt. Der Link wird in der folgenden Reihenfolge ermittelt:
- Wenn der Beitrag über ein WordPress-Miniaturbild verfügt, wird dessen Link übernommen.
- Wenn im Text des Beitrags ein Bild vorhanden ist, wird dessen Link übernommen. Wenn dieses Bild der Anker eines Links zu einer größeren Version dieses Bildes ist, wird die URL des Links verwendet.
- Wenn ein Beitrag keine WP-Miniaturansicht oder kein Bild im Text enthält, prüft das Plugin, ob für den Beitrag ein Bild (Anhang) geladen ist. Wenn ein Anhang vorhanden ist, wird der Link von dort übernommen;
- Wenn nichts gefunden wird, wird ein Stub-Eintrag zu einem benutzerdefinierten Feld hinzugefügt: „no_photo“. Dies ist notwendig, um diese Vorgänge zur Suche nach einem Link nicht jedes Mal ausführen zu müssen.
Bei der Deinstallation löscht das Plugin alles: benutzerdefinierte Felder, Optionen in der Datenbank, Bildcache, Cache-Ordner.
Laden Sie das Plugin herunter
Installation
- Entpacken Sie das Archiv in das Plugins-Verzeichnis /wp-content/plugins und aktivieren Sie das Plugin im Admin-Panel. Oder installieren Sie das Plugin über das WordPress-Admin-Panel: Plugins > Neu hinzufügen > Hochladen > Auswählen > Installieren.
- Konfigurieren Sie das Plugin auf der Admin-Panel-Seite: Einstellungen > Medien. Ich empfehle, in den WP-Grundeinstellungen für die große Größe „Große Größe“ Nullen zu setzen und für die mittlere Größe „Mittlere Größe“ die Größe zu verkleinern (zum Beispiel: 150 x 100). Dies ist notwendig, damit WP beim Laden eines Bildes keine unnötigen Bildgrößen erzeugt. Dieses Plugin wird diese Funktion ersetzen.
Plugin-Einstellungsblock auf der Seite „Mediendateien“:
Verwendung
Nach der Installation des Plugins im Template stehen Ihnen folgende Funktionen zur Verfügung:
- kama_thumb_src($args) – gibt einen Link zum erstellten Miniaturbild zurück
- kama_thumb_img($args) – gibt das fertige Bild zurück (img-Tag)
- kama_thumb_a_img($args) – gibt einen Bildlink zurück. Der Link führt zum Originalbild.
$args:
- w oder Breite– Miniaturbildbreite (erforderlich)
- H oder Höhe– Miniaturbildhöhe (erforderlich)
- Q– JPG-Komprimierungsqualität (Standard 85, max. 100)
- src– ein Link zum Originalbild, das verkleinert werden muss. In diesem Fall wird das Bild nicht vom Inhalt analysiert.
- alt– Alt-Attribut des Bildes
- Titel- Titelattribut des Bildes
- Klasse– Klassenattribut des Bildes. Klasse angeben Mini und die erforderlichen Abmessungen, um ein Miniaturbild für das Bild im Artikel zu erstellen.
- no_stub– Geben Sie an, ob Sie den Stub nicht anzeigen müssen. Stattdessen wird ein leeres Ergebnis zurückgegeben.
- post_id– Beitragskennung. Es muss übergeben werden, wenn eine Funktion außerhalb der WordPress-Schleife aufgerufen wird (z. B. innerhalb einer Funktion) oder wenn die Variable $post falsch definiert ist (z. B. wenn ein Bild aus einem anderen Beitrag definiert wird oder andere Probleme auftreten). Wenn Sie diesen Parameter übergeben, weiß das Skript genau, welcher Beitrag verarbeitet werden soll. Wenn dieser Parameter nicht übergeben wird, wird der Beitrag verarbeitet, der sich aktuell (beim Aufruf der Funktion) in der Variablen $post befindet.
Anmerkungen:
- Parameter können angegeben werden:
// Zeile kama_thumb_img("w=200 &h=100 &alt=Bildname &class=aligncenter"); // oder ein Array kama_thumb_img(array("width" => 200, "height" => 150, "class" => "alignleft"));
- Sie können nur die Breite oder Höhe angeben, dann wird die gegenüberliegende Seite (Höhe oder Breite) proportional zur verkleinerten Kopie ausgewählt;
- Der src-Parameter wird in Fällen benötigt, in denen Sie eine Miniaturansicht erstellen müssen, ohne benutzerdefinierte Felder zu verwenden (nehmen Sie ein beliebiges Bild auf und erstellen Sie eine Miniaturansicht dafür).
- Wenn Sie überprüfen müssen, ob ein Beitrag ein Bild enthält, und wenn nicht, dann etwas anderes tun, dann verwenden Sie diesen Code:
$img = kama_thumb_img("w=150&h=150&no_stub"); if(! $img) echo "Kein Bild";
$ img = kama_thumb_img ("w=150&h=150&no_stub" );
if (!$img)
echo „Kein Bild“ ;
Miniaturbild im Text des Artikels (Shortcode)
Wenn ein Artikel ein Bild verkleinern und einen Link zum Original erstellen muss, geben Sie dem Bild eine Klasse Mini und stellen Sie die erforderlichen Maße (Breite oder Höhe) ein.
Wir haben zum Beispiel ein Bild in den Artikel eingefügt:
Wir brauchen aber kein so großes Bild im Artikel und wollen es auch nicht optisch verkleinern, sondern tatsächlich, dann fügen wir noch die Mini-Klasse hinzu und geben die benötigten Maße an:
300
” />
Die von uns entfernte Höhe wird automatisch proportional ausgewählt.
Dieser Ansatz – kein Shortcode zu verwenden – erschien mir bequemer: Wir können Miniaturansichten für Bilder erstellen und gleichzeitig sehen, wie das Bild aussieht, wenn wir einen Beitrag bearbeiten, und selbst wenn das Plugin möglicherweise entfernt wird, werden die Bilder in den Beiträgen angezeigt weiterhin angezeigt (es wird kein unklarer Shortcode mehr angezeigt).
Damit ein Miniaturbild erstellt werden kann, muss diese Option in den Einstellungen aktiviert werden.
Anwendungsbeispiele
#1 Eine Miniatur besorgen
Innerhalb der WordPress-Schleife, wo wir ein Miniaturbild für einen Beitrag mit den Abmessungen 150x100 benötigen, verwenden wir den folgenden Code:
< ? php echo kama_thumb_img ( „w=150 &h=100 &class=alignleft myimg“); ? > |
Als Ergebnis erscheint anstelle dieses Codes ein vorgefertigtes Tag :
#2 Kein Platzhalterbild anzeigen
Um zu verhindern, dass ein Stub-Bild angezeigt wird, wenn der Eintrag keine Bilder enthält, müssen Sie den Parameter no_stub definieren:
Gibt die Miniaturbild-URL zurück: /wp-content/cache/thumb/ec799941f_100x80.png . Diese URL kann beispielsweise so verwendet werden:
< img src = ""alt = "" /> |
Wenn Sie eine Miniatur wie ein Bild erstellen müssen und durch Klicken darauf ein größeres Bild geöffnet wird, verwenden Sie den folgenden Code:
< ? php echo kama_thumb_a_img ( „w=150 &h=100 &class=alignleft myimg &q=75“); ? > |
Bei der Entwicklung und Pflege von Websites besteht häufig die Notwendigkeit, Miniaturansichten zu erstellen – kleinere Kopien von Bildern. Im Text der Seite können Sie anstelle eines großen Bildes eine solche Kopie platzieren, die einen Link zur Quelldatei darstellt. Die Arbeit von Fotoalben, Bildergalerien und Dateimanagern in einem CMS ist ohne die automatische Erstellung von Miniaturansichten undenkbar. Wir analysieren das Skript, das solche Miniaturansichten generiert, und machen uns anhand seines Beispiels mit einigen PHP-Funktionen für die Arbeit mit Bildern vertraut.
PHP verarbeitet Bilder mithilfe der GD-Bibliothek. Fast alle Hosting-Sites haben diese Bibliothek installiert. Wenn Sie plötzlich Pech haben, wenden Sie sich an den technischen Support Ihres Hostings. In unserem Skript verwenden wir die Funktionen, die in der GD-Bibliothek Version 2.0.1 enthalten sind.
Definieren wir zunächst die Anforderungen, die der Miniaturgenerator erfüllen soll. Es sollte Miniaturkopien von Bildern erstellen, die in den Formaten GIF, JPEG und PNG gespeichert sind. Wenn das Originalbild transparent war, sollte das Miniaturbild transparent bleiben. Auch Sicherheit und Geschwindigkeit sollten Sie nicht vernachlässigen.
Wir haben entschieden, was wir wollen. Jetzt können Sie mit der Programmierung beginnen. Wir übertragen die Quelldatei und die Abmessungen des endgültigen Bildes per URL:
$width = isset($_GET["width"]) ? (int) $_GET["width"] : 0; $height = isset($_GET["height"]) ? (int) $_GET["height"] : 0; $max_size = isset($_GET["max_size"]) ? (int) $_GET["max_size"] : 0; $file_name = $_GET["file"];
Es gibt zwei Möglichkeiten, die Miniaturbildgröße anzugeben. Sie können den Parameter max_size festlegen. Dann sind die Abmessungen des Ausgabebilds proportional zu den Originalabmessungen, ändern sich jedoch so, dass es in ein Quadrat der Größe max_size*max_size passt. Sie können die Größe des Ausgabebildes auch direkt in den Parametern Breite und Höhe festlegen (fehlt einer davon, wird das Bild proportional komprimiert).
Lassen Sie uns vereinbaren, dass das Skript Miniaturansichten für Dateien generiert, die sich im Stammverzeichnis des Webservers oder in Unterverzeichnissen befinden. Um unbefugten Zugriff auf andere Dateien zu verhindern, vereinbaren wir, dass der Dateiparameter in der URL den Pfad zur Datei vom Stammverzeichnis angibt und mit dem Zeichen „/“ beginnt.
$file_name = str_replace("..", "", $file_name); $file_name = $_SERVER["DOCUMENT_ROOT"] . $file_name; if (!is_file($file_name)) ( echo „Fehler: Datei nicht gefunden“; exit(); )
Betrachten wir eine Funktion, die die Hauptaufgabe des Skripts ausführt.
Funktion make_thumbnail($file_name, $thumb_width, $thumb_height, $max_size) (
Lassen Sie uns zunächst Informationen über das Quellbild erhalten:
$image_info = getimagesize($file_name);
Die Funktion getimagesize gibt ein Array $image_info zurück, das Werte einiger Bildmerkmale enthält:
- $image_info und $image_info sind die Breite und Höhe des Bildes,
- $image_info – eine Konstante der Form IMAGETYPE_XXX, die das Dateiformat definiert (zum Beispiel IMAGETYPE_GIF oder IMAGETYPE_JPEG),
- $image_info – die Zeichenfolge „height="yyy" width="xxx"", die zum Einfügen in das Tag vorgesehen ist
- $image_info["mime"] – MIME-Typ, der der Datei entspricht.
Abhängig vom MIME-Typ rufen wir unsere Funktion auf, um das Bild zu öffnen und zu laden: imagecreatefromGIF, imagecreatefromJPEG oder imagecreatefromPNG.
Switch ($image_info["mime"]) ( case "image/gif": if (imagetypes() & IMG_GIF) ( $image = imagecreatefromGIF($file_name); ) else ( $err_str = "GD unterstützt kein GIF"; ) break; case „image/jpeg“: if (imagetypes() & IMG_JPG) ( $image = imagecreatefromJPEG($file_name); ) else ( $err_str = „GD unterstützt kein JPEG“; ) break; ": if (imagetypes() & IMG_PNG) ( $image = imagecreatefromPNG($file_name); ) else ( $err_str = "GD unterstützt PNG nicht"; ) break; Standard: $err_str = "GD unterstützt nicht " . " ]; ) if (isset($err_str)) ( return $err_str; )
Nun müssen Sie die Abmessungen des Miniaturbilds bestimmen, sofern diese nicht explizit festgelegt werden.
$image_width = imagesx($image); $image_height = imagesy($image); //Beschränkung für Höhe und Breite ist festgelegt: if ($max_size) ( if ($image_width
Die Funktion imagecreatetruecolor erstellt ein Vollfarbbild der in den Parametern angegebenen Größe und gibt seinen Bezeichner zurück. Mit imagealphablending können Sie zwischen zwei Möglichkeiten wählen, mit dem Alphakanal zu arbeiten. Wenn der zweite Parameter dieser Funktion auf true gesetzt ist, überlappt das neue Bild beim Zeichnen mit einer durchscheinenden Farbe teilweise das alte. Wenn es auf „false“ gesetzt ist, werden die Pixel des Originalbilds vollständig durch die Pixel des neuen ersetzt. Es ist klar, dass wir das zweite Regime brauchen. Die Funktion imagesavealpha ist erforderlich, damit beim Aufruf der imagePNG-Funktion der Alphakanal im resultierenden Bild gespeichert wird.
$thumb = imagecreatetruecolor($thumb_width, $thumb_height); imagealphablending($thumb, false); imagesavealpha($thumb, true);
Jetzt ist es an der Zeit, die Funktion aufzurufen, die die Hauptaufgabe dieses Skripts ausführen wird. imagecopyresampled kopiert einen rechteckigen Bereich vom ersten Bild zum zweiten. Als Eingabe werden die Bild-IDs, die Koordinaten der oberen linken Ecke der Region im zweiten Bild, die Koordinaten der oberen linken Ecke der Region im ersten Bild und die Breite und Höhe der Region im zweiten Bild verwendet Bild sowie die Breite und Höhe der Region im ersten. Bei unterschiedlichen Bereichsgrößen wird das kopierte Bild gestreckt oder gestaucht. In diesem Fall wird Anti-Aliasing angewendet, damit die Bildqualität zufriedenstellend bleibt.
Es ist zu beachten, dass es eine weitere Funktion gibt, imagecopyresized, die imagecopyresampled ähnelt. Die Qualität des mit imagecopyresized erstellten Bildes kann kaum als zufriedenstellend angesehen werden, da diese Funktion kein Anti-Aliasing durchführt, aber schneller ist. Daher ist es in manchen Situationen durchaus akzeptabel, es zu verwenden.
Imagecopyresampled($thumb, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $image_width, $image_height);
ImagePNG($thumb); //Speicher freigeben imagedestroy($image); imagedestroy($thumb); )
Zu diesem Zeitpunkt konnte die Arbeit am Drehbuch abgeschlossen werden. In der Tat, indem Sie den obigen Code in einer Datei zusammenfassen (der Text der Funktion muss ganz am Anfang stehen) und die Operatoren am Ende platzieren
//mittlere Option! header("Content-Type: image/png"); make_thumbnail($file_name, $width, $height, $max_size);
Wir werden ein funktionierendes Skript bekommen.
Es ist zu beachten, dass die Header-Funktion die Antwortheader des Servers festlegt und in diesem Fall den Typ (PNG-Bild) der zurückgegebenen Daten angibt. Der Content-Type-Header muss wie alle Header vor Ausgabevorgängen festgelegt werden. Wenn Sie mit Grafiken arbeiten, müssen Sie diesen Header jedoch so niedrig wie möglich setzen, da Fehlermeldungen, die nach dem Setzen von Content-Type: image/png erscheinen, nicht im Browser angezeigt werden.
Schauen wir uns den geschriebenen Code an. Jedes Mal, wenn Sie eine Seite mit Miniaturansichten aufrufen, erstellt der Server diese neu, was bei hohem Datenverkehr auf der Website zu einer erheblichen Belastung des Servers führt. Die übliche Lösung in dieser Situation ist das Caching – das Speichern der Ergebnisse des Skripts in Dateien.
Das Zwischenspeichern dynamischer Informationen ist dann sinnvoll, wenn diese deutlich seltener aktualisiert werden, als die Seite, auf der sie angezeigt werden, aufgerufen wird. Es gibt Situationen, in denen Sie ein spontan generiertes Bild nicht zwischenspeichern müssen. Zum Beispiel der Besuchszähler, der natürlich bei jedem Seitenaufruf unterschiedliche Werte anzeigen sollte. Allerdings ändern sich die Bilder, für die Miniaturansichten erstellt werden, in den meisten Fällen relativ selten, in solchen Fällen ist ein Caching gerechtfertigt.
Sehen wir uns an, wie Sie Miniaturansichten zwischenspeichern können. Wir speichern sie in Dateien mit Namen, die MD5-Hashes der Namen der Dateien mit den Quellbildern sind, beispielsweise im Ordner img_cache im Stammverzeichnis des Webservers.
Define("IMG_CACHE", $_SERVER["DOCUMENT_ROOT"]."/img_cache/"); //für korrekten Betrieb filemtime clearstatcache(); //Name der Cache-Datei $cache_file_name = md5($file_name);
Bestimmen wir den Zeitpunkt der Änderung der Cache-Datei, falls vorhanden.
$cache_mtime = 0; if (is_file(IMG_CACHE . $cache_file_name)) ( $cache_mtime = filemtime(IMG_CACHE . $cache_file_name); )
Vergleichen wir die Zeit, die zum Ändern der Originalbilddatei benötigt wird, und die Zeit, die zum Ändern der Datei im Cache benötigt wird. Wenn sich das Bild geändert hat, seit die Miniaturansicht in den Cache gelangt ist, wird eine neue Miniaturansicht erstellt und der Cache aktualisiert. Wenn sich das Bild nicht verändert hat, verwenden wir einfach eine Kopie des Miniaturbilds aus dem Cache. Auf diese Weise wird der Cache auf dem neuesten Stand gehalten.
Unsere Funktion make_thumbnail sendet das Miniaturbild sofort an den Browser. Allerdings müssen Sie die Miniaturansicht zunächst im Cache speichern. Daher sollten wir die Funktion make_thumbnail nicht direkt aufrufen, wie wir es oben getan haben. Sie müssen die Ausgabe mithilfe der Pufferung abfangen. Nach der Ausführung des Codeabschnitts zwischen ob_start und ob_end_clean enthält die Variable $thumbnail die Daten, die die imagePNG-Funktion an den Browser senden wollte, und die Variable $thumb_size enthält die Größe der Daten.
Wenn ($cache_mtime
Es ist zu beachten, dass reduzierte Kopien gelöschter Bilder im Verzeichnis img_cache verbleiben. Daher muss bei umfangreichen Änderungen an der Site-Struktur der Cache manuell geleert werden.
Jetzt müssen nur noch die Header gesetzt und das Miniaturbild an den Browser gesendet werden.
Header("Content-Type: image/png"); //Thumbnail-Erstellungszeit header("Last-Modified: ".gmdate("D, d M Y H:i:s", $cache_mtime)." GMT"); header("Content-Length: ".$thumb_size); //Miniaturansicht an Browser ausgeben echo $thumbnail;
Jetzt müssen Sie die Codeabschnitte in einer Datei, zum Beispiel „preview.php“, zusammenfassen (wobei die Funktion „make_thumbnail“ am Anfang steht) und diese im Stammverzeichnis des Webservers ablegen. Dort müssen Sie das Verzeichnis img_cache erstellen und seine Zugriffsrechte auf 777 setzen. Alles ist fertig!
Lassen Sie das Bild pict.jpg im Bilderverzeichnis liegen, das heißt, es kann mithilfe von Code in die Seite eingefügt werden 
. Dann sieht der Code, der das Miniaturbild platziert, so aus 
.
Natürlich können in diesem Skript auch andere Funktionen implementiert werden. Der Artikel hat den Grundstein gelegt, der Rest hängt von Ihrer Vorstellungskraft ab.
