Wie Sie die Responsive-Images-function von WP 4.4 in Ihren Designs verwenden

Ich verstehe nicht wirklich, wie ich das neue Responsive-Bild-Feature verwenden kann, das WordPress in meinen Themen bietet.

Beispiel:

In meinem Thema füge ich ein Header-Bild hinzu. Ich benutze daher das Custom-Header-Image vom Customizer ODER den Post-Thumbnail:

???

Also im ersten Fall ist die Ausgabe das:

  

was völlig in Ordnung ist. Aber wenn ich ein Bild nach Anhang ID anzeigen möchte, egal welche function ich verwende, bekomme ich nicht die Ausgabe, die ich erwarte.

Beispiel:

Im obigen Code siehst du “???”. An diesem Ort habe ich einige Dinge ausprobiert. Zum Beispiel:

 attachment_id, 'full' ); ?> 

Was nur zu einer Größe führt (siehe Größenattribut):

 Delft_IMG_6275 

Also, was ist die richtige Art, Bilder im Theme anzuzeigen, so dass es ein ähnliches Ergebnis wie the_post_thumbnail() ausgibt?

Solutions Collecting From Web of "Wie Sie die Responsive-Images-function von WP 4.4 in Ihren Designs verwenden"

Nach unserem Austausch in den Kommentaren habe ich Ihre Frage neu gelesen und habe eine recht einfache Antwort:

Es sieht so aus, als ob es gut funktioniert.

Sie sind besorgt über das srcset in Ihrem zweiten Beispiel, aber es ist das srcset Attribut, das Sie betrachten sollten und es zeigt alle Ihre Bildgrößen an:

 Delft_IMG_6275 

Ihr Browser liest die Attribute so:

1 – Sehen Sie sich das sizes und finden Sie die erste Übereinstimmung für die aktuelle Breite des Darstellungsbereichs. In diesem Fall, wenn das Ansichtsfenster bis zu 1920px breit ist, verwenden Sie den Wert 100vw , konvertiert in px , ansonsten verwenden Sie 1920px .

2 – Sehen Sie sich das Attribut srcset und wählen Sie ein Bild, das dem Wert von (1) entspricht.

Auf einem schönen großen Bildschirm mit einem Fenster voller Breite wählt der Browser den sizes von 1920px . Dadurch wird der Browser auf das mit 1920w im Attribut srcset markierte Bild mit der URL Ihres Bildes in voller Größe ausgerichtet.

Bei einem Portrait-iPad, bei dem das Ansichtsfenster 768px breit ist, beträgt der in (1) erhaltene Wert 100vw was für dieses Ansichtsfenster 768px . Wenn wir im srcset für 768w wir die URL zur medium_large (eine neue Standardgröße in WP4.4, die nicht in der Admin-Oberfläche angezeigt wird).

Wenn die Breite des Darstellungsbereichs nicht genau übereinstimmt, sollte der Browser die nächsthöhere Größe auswählen.

Unter Umständen möchten Sie eine längere Liste von Bildern add_image_size() die Sie mit add_image_size() in Ihrem add_image_size() hinzufügen können. WP erstellt ein srcset Attribut mit allen Bildern, die dem Seitenverhältnis der Bildgröße entsprechen, die Sie anzeigen srcset .

Es gibt auch Situationen, in denen Sie ein Attribut für benutzerdefinierte sizes möchten, und Sie können das Attribut dafür filtern, aber wenn Ihre Frage steht, glaube ich nicht, dass Sie danach suchen.

Auf der einen Seite gibt es nichts, was Sie tun sollten, auf der anderen Seite, WordPress erstellen nicht wirklich responsive Bilder.

WordPress erstellt ein srcset Attribut, wenn Sie die srcset APIs basierend auf den registrierten Bildgrößen verwenden, wobei alle Bilder dem Seitenverhältnis entsprechen. Sie müssen die relevanten Bildgrößen registrieren lassen, damit WordPress die Bilder erzeugen und in einem srcset .

In Ihrem “gescheiterten” Beispiel werden volle Bilder niemals reagieren, da WordPress keine Bilder erzeugt, die größer als das ursprüngliche Bild sind (und in jedem Fall ist es schwierig, eine Bilderzeugung für eine Größe zu kodieren, die von einem Bild zu einem anderen wechselt).

Was Sie in Ihrem Thema tun müssen, ist zu entscheiden, welche Größen Sie unterstützen möchten, und sie zuerst zu definieren. Wenn Sie zum Beispiel ein 150×150-Thumbnail auch auf x2-Retina erhalten möchten, müssen Sie sowohl eine Größe von 150×150 als auch eine Größe von 300×300 registrieren. Wenn Sie auf Mobilgeräten einen Speicherplatz von 50×50 für das Thumbnail reservieren, müssen Sie auch eine Größe von 50×50 und 100×100 (für Retina) registrieren, nicht sicher, ob dies in der Praxis sinnvoll ist, aber das ist die Theorie davon.

Rant: Es ist eine Beleidigung der Intelligenz, zu wissen, welcher WordPress-core ein Feature ist. Es ist ein Süßstoff, der Ihnen hilft, viele API-Aufrufe zu vermeiden, aber es hilft Ihnen nicht beim eigentlichen Entcasting, welche Größe Sie tatsächlich brauchen, und es ist trotzdem mühsam, WordPress so zu konfigurieren, dass Sie sie verwenden können.

Sie können ein Array als Größe verwenden:

 wp_get_attachment_image( get_custom_header()->attachment_id, array('700', '600')); 

BEARBEITEN:

@ downvoter sagen, warum Sie downvoting sind. Ich stimme zu, dass ich falsch lag, aber Sie hätten sagen können: “Ja, Sie können ein Array verwenden, um das Bild zu skalieren, ABER es wird nur auf die nächste Größe zu einer definierten Bildgröße voreingestellt.

Definierte Bilder werden entweder im Medienbereich von SETTINGS-> MEDIA im Backend-Admin eingestellt, dies sind “Thumbnail”, “Medium” und “Full” ODER durch benutzerdefinierte Verwendung und du kannst add_image_size('name-you want-use', 340, 230, true); in Ihrer functionsdatei ETC … ETC ..