Inhalt
- Das Problem mit WordPress und "fließenden Bildern"
- Die Nicht-jQuery-Lösung
- Der Code
- Ein Geständnis
- Vorsichtsmaßnahmen
- Kenntnisse erforderlich: Grundlegendes PHP und CSS
- Benötigt: WordPress installieren, Texteditor der Wahl
- Projektzeit: 10 Minuten
Wenn Sie die gedruckte Version des .net-Magazins abonnieren (wenn nicht, warum nicht!?), Werden Sie feststellen, dass die Ausgabe dieses Monats einen hervorragenden Artikel zum Thema "Responsive Design with WordPress" enthält.
In dem Artikel skizziert der Autor Jesse Friedman eine Menge wirklich nützlicher Techniken, um die inhärente WordPress-Funktionalität optimal zu nutzen und zu überwinden, um eine wirklich effektive reaktionsfähige Website zu erstellen. Wenn Sie daran denken, eine reaktionsfähige Website mit WordPress zu erstellen, sollten Sie auf jeden Fall eine Kopie seines Artikels abholen. Es ist ein Muss.
Nachdem ich kürzlich mein persönliches Blog in WordPress mit einem reaktionsschnellen Mobile-First-Ansatz neu erstellt hatte, war ich mit einigen der im Artikel behandelten Techniken vertraut. Das einzige, was mir wirklich auffiel, war Jesses Ansatz, flüssige Bilder über jQuery zu ermöglichen.
Das Problem mit WordPress und "fließenden Bildern"
Wie Sie sicher alle wissen, erfordern flüssige Bilder, die eine maximale Breite von 100% verwenden, dass Bilder keine feste Breite oder Höhe haben, damit sie auf die Größe ihres Containers skaliert werden können. Leider berechnet WordPress automatisch die Abmessungen von Bildern, die aus der Medienbibliothek generiert wurden, und fügt allen img> -Tags die entsprechenden Attribute für Breite und Höhe hinzu.
Dies ist ideal für die Geschwindigkeit beim Rendern von Seiten, wirft jedoch eine fest Spanner in Arbeit, wenn es darum geht, reaktionsschnelle Layouts zu erstellen, da die Bildabmessungen nicht mehr auf die Größe ihres Containers beschränkt sind.
Das ist ein Problem.
Die Nicht-jQuery-Lösung
In seinem Artikel schlägt Jesse vor, jQuery zu verwenden, um die Attribute width und height aus allen img> -Tags auf der Seite zu entfernen, sobald diese geladen wurde. Dies funktioniert sicherlich, aber beim Erstellen meiner Website gefiel mir die Idee nicht, mich auf JavaScript zu verlassen, um dies zu erreichen, insbesondere wenn auf der betreffenden Seite viele Bilder vorhanden waren.
Hier kamen WordPress-Filter zum Einsatz.
Der WordPress-Codex definiert einen Filter als:
"... Hooks, die WordPress startet, um Text verschiedener Typen zu ändern, bevor er zur Datenbank hinzugefügt oder an den Browserbildschirm gesendet wird."
Wie sich herausstellt, ist dies genau das, was wir brauchen. Indem wir einen Filter einrichten, der für alle Bilder als letzte Aktion ausgeführt wird, bevor sie auf der Seite gerendert werden, können wir mithilfe von PHP die Attribute width und height entfernen, um die Notwendigkeit einer (möglicherweise) teuren DOM-Manipulation über JavaScript zu umgehen.
Der Code
- /**
- * ANTWORTBILDFUNKTIONEN
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- Funktion remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (width
Im obigen Code fügen wir zwei Filter mit der Funktion add_filter hinzu. Das erste Argument ist der Filter, in den wir uns einbinden möchten, und das zweite gibt die Funktion an, die ausgeführt werden soll, wenn der Filter aufgerufen wird.
In unserem Code verbinden wir uns mit zwei obskuren Funktionen:
- post_thumbnail_html - Bilder, die mit dem abgerufen wurden post_thumbnail ()
- image_send_to_editor - Bilder, die dem Editor hinzugefügt wurden
Wir verwenden dann einen regulären Ausdruck, um sowohl die Breiten- als auch die Höhenattribute aus den Bild-Tags zu entfernen. Wenn unsere Bilder jetzt an den Browser gesendet werden, können sie vollständig flüssig sein, so wie es uns Herr Marcotte gesagt hat.
Ein Geständnis
Ich muss gestehen, dass ich die Idee hatte, sie zu benutzen add_filter Um Attribute zu entfernen, konnte ich für mein ganzes Leben nicht die richtigen WordPress-Filter finden, in die ich mich einhaken konnte.
Nach langem Suchen stieß ich schließlich auf diesen äußerst hilfreichen Beitrag von Nathaniel Taintor zu Wordpress Stack Exchange, der die Informationen zu den beiden benötigten Filtern enthielt.
Vorsichtsmaßnahmen
Soweit ich weiß, besteht der einzige große Nachteil dieses Ansatzes darin, dass die Attribute "Breite" und "Höhe" nicht aus allen Bildern auf Ihrer Website entfernt werden. Ich fand, dass dies ein Problem ist, insbesondere bei den Gravatar-Bildern, die WordPress in Kommentaren verwendet.
Wenn jemand eine Lösung für dieses Problem hat, hinterlassen Sie bitte einen Kommentar, damit wir alle davon profitieren können.
Ich hoffe, dies war nützlich und hat eine Alternative zum Verlassen auf JavaScript gezeigt, um „flüssige Bilder“ auf WordPress-Websites zu implementieren.
Worte: David Smith
Dave Smith ist Front-End-Designer in der Nähe der wunderschönen Stadt Bath in Großbritannien. Wenn er nicht gerade an neuen und aufregenden Webprojekten arbeitet, spielt er Trompete in allen Bereichen, von Big Band-Jazzgruppen bis hin zu Sinfonieorchestern. Sie können Dave auf Twitter als @get_dave einholen.
