Funktionsweise von WordPress-Bildern (für ein besseres Responsive Design)

Was Sie erstellen werden

Eine der größten Herausforderungen, denen Webentwickler heute gegenüberstehen, ist der richtige Umgang mit Bildern für responsives Design. Wir haben Probleme mit der richtigen Größenanpassung des Bildes für den Bildschirm, auf dem er betrachtet wird, unter Berücksichtigung der Downloadgeschwindigkeit des Benutzers, ob das Gerät eine Netzhaut ist (oder im Allgemeinen ein Bildschirm mit einer extrem hohen Auflösung) und mehr. 

Zum Glück die Das Element wurde kürzlich zu einer akzeptierten Spezifikation, die von den wichtigsten Browsern implementiert wird, aber es bleibt noch einiges zu tun. Glücklicherweise macht die Art und Weise, wie WordPress mit Bildern umgeht, vieles einfacher. 

Wie funktioniert der Media Uploader?

Lassen Sie uns zunächst einen kurzen Absturzkurs zur Verwendung des Media Uploader durchführen. Es ist im WordPress-Admin aus verschiedenen Bereichen zugänglich, darunter Posts, Seiten, benutzerdefinierte Posttypen, die es unterstützen (im Allgemeinen der Editor) und das Medienmenü. 

Der einzige Unterschied zwischen dem Medienmenü und dem Rest besteht darin, dass ein Bild direkt mit einem Beitrag oder einer Seite verknüpft wird, wenn es aus dem Editor hochgeladen wird. 

Sobald ein Bild hochgeladen wurde, erstellt WordPress standardmäßig bis zu 4 Größen: 

• Vorschaubild (150x150)
• mittel (300 max x 300 max)
• groß (640 max x 640 max)
• voll (die Originalgröße des Bildes). 

Sie können mit der Funktion auch Ihre eigenen Bildgrößen hinzufügen add_image_size (). Wenn wir zum Beispiel ein Bild für ein Produkt hinzufügen möchten, das 700px breit und 450px hoch ist, würden wir Folgendes tun: 

add_image_size ('product-img', 700, 450, false);

Dies bedeutet, dass WordPress ein neues Bild mit dem Namen "product-img" mit unseren angegebenen Abmessungen erstellen soll. Das letzte Argument ist, ob das Bild beschnitten werden soll oder nicht. 

Wenn eingestellt auf falsch, Das Bild wird proportional angepasst, ohne es zu beschneiden. Bei Einstellung auf true wird das Bild entweder von den Seiten oder von oben / unten abgeschnitten. Seien Sie jedoch vorsichtig, da die Ergebnisse von Bild zu Bild variieren können. 

Ein Bild einfügen

Es gibt zwei Möglichkeiten, ein Bild in einen Beitrag oder eine Seite einzufügen: Der erste Weg führt über den Media Uploader (siehe Abbildung): 

Der zweite Weg ist die Verwendung eines vorgestellten Bildes. Sie können vorgestellte Bilder aktivieren, indem Sie diesen Code zu Ihrem Thema hinzufügen Functions.php Datei oder irgendwo am Anfang Ihrer Plugins: 

if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); 

Dadurch wird allen gekennzeichneten Beiträgen, Seiten und benutzerdefinierten Beitragstypen, die dies unterstützen, ein Feld mit dem Titel "Bild" hinzugefügt. Sie können auch ein zweites Argument senden, bei dem es sich um ein Array handelt, das ein Bild enthalten soll. 

Wenn Sie beispielsweise möchten, dass Beiträge nur Bilder unterstützen, 

if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails', array ('post');

Der letzte Schritt besteht darin, diesen Code in den Loop Ihrer Vorlage einzufügen, wo immer das Bild angezeigt werden soll: 

if (has_post_thumbnail ()) the_post_thumbnail ('large');  

Das akzeptierte Argument ist der Name der Bildgröße, die Sie verwenden möchten. Standardmäßig ist es post-thumbnail. Sobald Sie das haben, fügen Sie Ihr ausgewähltes Bild über dieses Feld hinzu: 

Wenn Sie eine Gruppe von Bildern zu demselben Beitrag oder derselben Seite hochladen, können Sie sie schließlich als Galerie einfügen [Galerie] Kurzcode, über den Sie hier mehr erfahren können. 

Verbesserungen in 3.9

Mit der Einführung von WordPress 3.9 und einigen netten Verbesserungen an Bildern und der Galerie. Abgesehen von Verbesserungen am visuellen Editor, wie der Möglichkeit, Bilder per Drag & Drop zu verschieben, add_image_size () erhält ein neues Argument, um anzugeben, ob an den Seiten oder oben / unten zugeschnitten werden soll. 

Was hat das alles mit Responsive zu tun? Ich bin froh, dass du gefragt hast! 

Den Medien-Uploader nutzen

Die Basis des Das Element ist, dass wir als Webentwickler mehrere Kopien eines Bildes zur Verfügung stellen, um an bestimmten Haltepunkten angezeigt zu werden, d. h. image-images_14 / Verständnis, wie-wordpress-images-work-for-better-responsive-design_2.jpg für Smartphones und image-full.jpg für größere Bildschirme. 

Im Moment wird dieses Element akzeptiert, jedoch noch einige Monate nach der Integration in Browser. Es gibt jedoch eine andere Option. 

picturefill.js

Es gibt eine von der Filamentgruppe erstellte JavaScript-Datei mit dem Namen picturefill.js, die dieselbe Funktion wie die emuliert Element. 

Die Syntax sieht so aus: 

Beachten Sie, dass es einen gibt data-src Eintrag für jedes Bild, das wir verwenden möchten, sowie einen zugehörigen Mindesthaltepunkt, um dieses Bild anzuzeigen. Es ist erwähnenswert, dass die Anzahl der möglichen Bilder / Haltepunkte unbegrenzt ist. 

Dies ist derzeit ein weitgehend akzeptierter Weg, um den gleichen Effekt zu erzielen wie der Element. Ich stelle mir vor, dass der richtige Weg, um responsive Bilder zu codieren, sein wird: -> picturefill.js ->

Dies ermöglicht uns die Verwendung des neuesten und besten HTML-Codes in modernen Browsern mit den richtigen Fallbacks (yay progressive Verbesserung!).. 

Mit picturefill.js Durch die vielen Bilder, die der Media Uploader erstellt, können wir einen automatisierten Prozess für responsive Bilder auf unseren WordPress-basierten Websites erstellen. 

Alles zusammenfügen

Derzeit gibt es keine Möglichkeit, dass WordPress dies nativ durchführt. Ich kann mir vorstellen, dass sich das ändern wird wenn Element wird ausgerollt (dibs beim Senden an Core :). Das bedeutet nicht, dass wir selbst ein paar Dinge tun können, um den Prozess zu automatisieren. In diesem Abschnitt werden wir einige Möglichkeiten ansprechen. 

Hinweis: Sie werden feststellen, dass ich das Präfix verwende jlc_ auf meine Funktionen. Ich empfehle Ihnen, Sie zu verwenden, um Konflikte mit anderen Designs und Plugins zu vermeiden. 

Ausgewählte Bilder ersetzen

Der erste Teil dieses Puzzlespiels besteht darin, die vorgestellten Bilder durch das zu ersetzen picturefill.js Markup. 

Dies kann mit dem Filter erreicht werden post_thumbnail_html, Dadurch wird das Standard-Markup für unser eigenes ausgetauscht. Das erste, was wir tun müssen, ist die Enqueue picturefill.js (was in getan werden kann Functions.php oder in deinem Plugin): 

function jlc_script () wp_register_script ('picturefill', get_stylesheet_directory_uri (). '/js/picturefill.js'); wp_enqueue_script ('picturefill');  add_action ('wp_enqueue_scripts', 'jlc_script');

Stellen Sie sicher, dass Sie den Pfad hier ändern, um den Speicherort Ihres zu bestimmen picturefill.js Datei. Sobald dies geschehen ist, ist es Zeit, unsere Ersatzfunktion hinzuzufügen:

Funktion jlc_get_featured_image ($ html, $ aid = false) $ size = array ('thumbnail', 'medium', 'large', 'full'); $ img = ''; $ ct = 0; $ aid = (! $ aid)? get_post_thumbnail_id (): $ aid; foreach ($ size as $ size) $ url = wp_get_attachment_image_src ($ aid, $ size); $ width = ($ ct < sizeof( $sizes ) - 1 ) ? ( $url[1] * 0.66 ) : ( $width / 0.66 ) + 25; $img .= ' 0) 'data-media =' (min-width: '. $ width .'px)'>':'>'; $ ct ++;  $ url = wp_get_attachment_image_src ($ aid, $ size [1]); $ img. = ' '; return $ img; 

Hier werden verschiedene Aufgaben ausgeführt: 

1. Wir haben ein Array mit jeder Bildgröße, die wir aufnehmen möchten (nach Name). Sie können hier beliebig hinzufügen oder entfernen
2. Wir richten das ein picturefill.js Markup
3. Wir durchlaufen das Array, ermitteln die URL für jede Größe und fügen sie als Eintrag zu unserem Element picturefill.js hinzu
4. Wir bieten einige Berechnungen an, um herauszufinden, wo die Haltepunkte basierend auf den Bildgrößen auftreten sollten
5. Für Benutzer ohne Javascript greifen wir auf das mittelgroße Bild zurück

Als nächsten Schritt fügen Sie unseren Filter hinzu, den Sie direkt unter der Funktion hinzufügen können: 

add_filter ('post_thumbnail_html', 'jlc_get_featured_image');

Nun unsere Funktion jlc_get_featured_image () wird anstelle der Standardmarkierung für die Ausgabe von post_thumbnail verwendet.

Ich habe das alles in ein einfaches Plugin namens Responsive Featured Image verpackt. Sie können es von Github herunterladen.

Andere Methoden

Wie Sie sich vorstellen können, ist der Umgang mit Bildern eine ziemlich komplizierte Angelegenheit, wenn es um responsives Design geht. Die Funktion ungefähr funktioniert nur mit den vorgestellten Bildern, nicht mit allen Bildern im Beitrag. Zwar gibt es hierfür Methoden, einschließlich dieses Plugins, bei meinen Tests wurden jedoch Leistungs- und Skalierungsprobleme festgestellt. 

Sie können auch einen Kurzcode verwenden, indem Sie eine URL oder eine Bild-ID übergeben, um den Code zu generieren. [jlc_picturefill_image aid = x]. Ohne umfangreiche Codierung kann der Media Uploader leider nicht verwendet werden, um Bilder in den Post einzufügen. Mit der Drag & Drop-Funktion in 3.9 kann dies zu noch mehr Konflikten führen. 

Wenn Sie sich für diese Methode interessieren, in meinem Buch, Responsive Design mit WordPress, Ich gehe viel tiefer auf diese und WordPress-Bilder im Allgemeinen ein.

Fazit

In diesem Artikel haben wir uns ausführlich mit der Verarbeitung von Bildern in WordPress beschäftigt und eine Möglichkeit zur Integration untersucht picturefill.js in einem benutzerfreundlichen und vor allem effizienten Herrenhaus. 

Es ist wichtig zu wissen, dass dies ein sich ständig entwickelndes Interessengebiet ist. Wenn sich bessere Methoden zu entwickeln beginnen, bin ich gespannt, was die (hoffentlich nahe liegende) Zukunft sowohl für responsive Bilder als auch für WordPress bedeutet.