In diesem Beitrag werden wir gemeinsam die Responsive Images API in WordPress erkunden und erläutern, was responsive Bilder sind, warum man sie verwenden sollte, wie WordPress diese Bilder erzeugt und was man tun kann, wenn man sie anpassen möchte.
Was sind responsive Bilder?
Reaktionsfähige Bilderist ein Bild, das an die Bildschirmgröße des Geräts, auf dem es betrachtet wird, angepasst werden kann. Das ist wichtig, weil es bedeutet, dass das Bild immer gut aussieht, egal, auf welchem Gerät es angezeigt wird.
Schauen wir mal.Ein Beispiel.
Die meisten modernen Browser verfügen über einen speziellen Modus für die Anzeige von Webseitenlayouts auf mobilen Geräten. In Chrome-basierten Browsern heißt er Gerätemodus, in Firefox und Safari heißt er Responsive Design Mode. Sie können in der Regel über die Entwicklerwerkzeuge Ihres Browsers darauf zugreifen. Wenn dieser Modus aktiviert ist, können Sie sehen, wie eine Webseite auf verschiedenen Geräten aussehen wird.
Wenn Sie sich das Kopfzeilenbild in diesem Beispiel ansehen, werden Sie feststellen, dass es beschnitten ist, wenn Sie es auf Ihrem mobilen Gerät betrachten. Das Bild im Inhaltsbereich ist jedoch nicht beschnitten; es wird lediglich in einer kleineren Größe angezeigt.
Daher möchten Sie vielleicht in der Lage sein, eine beschnittene Version des Bildes auf einem mobilen Gerät und das vollständige Bild auf einem Desktop-Gerät anzuzeigen. In diesem Fall sind responsive Bilder sehr nützlich.
Wie Sie in diesem Beispiel für ein responsives Bild sehen könnenWie Sie in sehen können, werden sowohl die Kopfzeile als auch der Hauptinhalt beschnitten, wenn Sie zu einem mobilen Gerät wechseln.
Das Wissen darüber, wie responsive Bilder funktionieren, würde den Rahmen dieses Tutorials sprengen. Weitere Informationen finden Sie in der MDN Web Documentation unterLesen Sie mehr darüber, wie Sie responsive Bilder implementieren können.
WordPress Responsive Images API
srcsetAb WordPress 4.4 ist die Einbeziehung und Zuordnung derFunktion (math.)GrößenWordPress unterstützt von Haus aus responsive Bilder. Das bedeutet, dass es standardmäßig aktiviert ist und jedes von WordPress generierte Bild automatisch responsive ist.wp_get_attachment_image()
Um zu verstehen, wie das funktioniert, sehen wir uns ein einfaches Beispiel an.
Fügen Sie zunächst das Bild in die Mediathek Ihrer WordPress-Website ein.
Wenn Sie dann das Upload-Verzeichnis aufrufen und sehen, wo das Bild gespeichert ist, werden Sie feststellen, dass es mehrere Versionen des Bildes gibt.
Das liegt daran, dass WordPress automatisch mehrere Versionen eines Bildes in unterschiedlichen Größen erzeugt, die dann in verschiedenen Kontexten verwendet werden können.
Bevor es responsive Bilder gab, versuchten die Entwickler, dem Browser je nach Gerätetyp dynamisch unterschiedliche Bilder zu liefern. Der Server prüft die Größe des verwendeten Geräts und stellt dann das entsprechende Bild bereit.
Dies kann mit Hilfe der OptionBenutzer-AgentDer String wird als Zeichenkette implementiert, die vom Browser an den Server gesendet wird und Informationen über den Browser und das verwendete Gerät enthält.
// Überprüfen Sie die Variable $_SERVER["HTTP_USER_AGENT"], um festzustellen, ob es sich um eine Anfrage von einem mobilen Gerät handelt
$isMob = is_numeric(strpos(strtolower($_SERVER["HTTP_USER_AGENT"])), "mobile"));
if($isMob){
echo 'Using Mobile Device...' ;
}else{
echo 'Using Desktop...' ; }else{ ;
}Dies erschwert jedoch das Testen, da Sie auf einem physischen Gerät testen müssen, indem Sie dieBrowserStackund andere Dienste, oder richten Sie einen User Agent String in einer Testumgebung ein.
Beim Responsive Design werden Dinge wie Media-Queries verwendet, um eine einzelne Seite zu rendern, die im Browser auf der Grundlage von Faktoren wie Viewport-Breite und Anzeigedichte reagiert. Responsive Bilder folgen dieser Strategie und senden alle Informationen im Voraus an den Browser. Der Browser ist dann für das Laden des passenden Bildes verantwortlich, anstatt diese Entscheidungen auf dem Server zu treffen, bevor die Seite geladen wird.
Um dies in Aktion zu sehen, fügen wir das Bild zum Beitrag hinzu und stellen seine Größe im Editor auf volle Größe ein.
Wenn Sie das Bild in der Vorschau betrachten, werden Sie feststellen, dass das Bild-Tag mehr als nur die Bild-URL enthält; es enthält auch einesrcsetAttribut und einGrößenAttribute.
<img decoding="async" fetchpriority="high" width="799" height="533" src="https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg" alt="" class="wp-image-9"
srcset=" https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg 799w, https://learnpress.test/wp-content/uploads/2023/09/water-4-300x200.jpeg 300w, https://learnpress.test/wp-content/uploads/2023/09/water-4-768x512.jpeg 768w"
sizes="(max-width: 799px) 100vw, 799px">Schauen wir uns dieses Bild-Tag genauer an, um zu verstehen, was diese Attribute bewirken.
solltesrcsetenthält eine Liste aller verschiedenen Versionen des von WordPress erzeugten Bildes sowie die Breite des Bildes in Pixeln.
In diesem Beispiel gibt es 3 verschiedene Versionen des Bildes mit Breiten von799und769im Gesang antworten300.
sollteGrößengibt die Breite des Bildlayouts für jede Medienbedingungsliste an. In diesem Beispiel sind die Medienbedingungen(max-width: 799px)und hat zwei Layout-Breiten100vwim Gesang antworten799px.100vwGibt an, dass das Bild mit 100% der Breite des Ansichtsfensters angezeigt wird.799pxGibt an, dass das Bild mit 799px angezeigt wird.
Wenn also in diesem Beispiel die Breite des Ansichtsfensters weniger als 799 Pixel beträgt, wird das Bild mit 100% der Breite des Ansichtsfensters angezeigt, andernfalls wird das Bild mit einer Breite von 799 Pixel angezeigt.
Der Browser kann dann anhand dieser Informationen bestimmen, welches Bild auf der Grundlage des Geräts (bestimmt durch die Breite des Ansichtsfensters), das das Bild anzeigt, geladen werden soll. Eine serverseitige Logik ist nicht mehr erforderlich, was zu einer Verkürzung der Seitenanforderungszeiten führt. Da die Bilder statisch bereitgestellt werden, kann der Browser sie im Cache speichern, wodurch sich die Ladezeiten weiter verkürzen.
Neue Funktionen und Haken
WordPress 4.4 führt viele neue Funktionen und Hooks ein, die die Arbeit mit responsiven Bildern erheblich erleichtern.
- wp_get_attachment_image_srcset () - ruft den Wert des Attributs "Bildanhang" ab
srcset. - wp_calculate_image_srcset () - Hilfsfunktion zur Berechnung der Bildquelle, die in die Eigenschaft aufgenommen werden soll
srcset. - wp_get_attachment_image_sizes () - Erzeugt den Wert des Größenattributs des Bildes.
- wp_calculate_image_sizes () - Hilfsfunktion für die Erstellung des Attributs Bildgröße.
- wp_image_add_srcset_and_sizes () -
srcsetZu den bestehendenimgElement, um Attribute hinzuzufügen und seine Größe zu ändern.
Um die Übermittlung von Daten ansrcsetAttribut fügt sehr große Bilder hinzu, fügt einemax_srcset_image_width (Maschinen-)FilterSie ermöglicht es dem Thema, die maximale Bildbreite für die in der Liste enthaltenen Bilder festzulegen.srcsetDer Standardwert ist 2048 Pixel. Der Standardwert ist 2048 Pixel.
Benutzerdefinierte responsive Bildauszeichnung
Responsive Image Markup kann bei Bedarf auch individuell angepasst werden.
Sie können Filter verwendenim Gesang antworten(Maschinen-)Filterum den Standardwert zu ändernsrcsetim Gesang antwortenGrößenAttribute, oder mit dem Filter wp_get_attachment_image_attributesüberschreiben.Die oder Attribute von Bildern, die nicht in den Beitragsinhalt eingebettet sind (z. B. Beitrags-Thumbnails, Galerien usw.), werden ähnlich wie andere Bildattribute geändert.wp_calculate_image_srcset wp_calculate_image_sizes srcsetGrößen
Wenn Sie ein Thema entwickeln, können Sie auch Ihr eigenes benutzerdefiniertes Markup erstellen, indem Sie die Funktionwp_get_attachment_image_srcset Paradigma.
Schauen wir uns ein Beispiel an.
Angenommen, Sie möchten eine Ausgabe erzeugenimgFunktion für die Beschriftung des Bildes, aber Sie wollen nur mittelgroße Bilder rendern und eine benutzerdefinierteGrößenAttribute.
Standardmäßig wird das Bild bei einer Breite des Ansichtsfensters von 100% für Ansichtsfenster mit einer Breite von weniger als 799 Pixeln angezeigt, und mit einer Breite von 799 Pixeln bei breiteren Ansichtsfenstern, bei denen Sie die Eigenschaft Größe so einstellen möchten, dass eine mittlere Bildbreite von 768 Pixeln verwendet wird.
Das bedeutet, dass Sie die Eigenschaft size auf(max-width: 768px) 100vw, 768px.
function get_custom_responsive_image( $attachment_id ) {
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
echo '<img src="' . $img_src . '" srcset="' . $img_srcset . '" sizes="(max-width: 768w) 100vw, 768px" alt="Unser individuelles responsives Bild">';
}Sie können diese Funktion dann in jeder Themendatei aufrufen, die PHP unterstützt, z. B. in Vorlagen und Vorlagenabschnitten im klassischen Thema oder in Blockmustern im Blockthema.
In diesem Beispiel wird es dem Standardschema für die Fußzeile des TwentyTwelveThirteen-Themas hinzugefügt, das sich im Block am oberen Rand des Schemas befindet. Die Bild-ID ist 9, die Sie an die Funktion übergeben können:
<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40)">
<?php get_custom_responsive_image( 9 ); ?>
</div>
<!-- /wp:group -->Wenn Sie dies am Frontend betrachten, können Sie sehen, dass die Eigenschaft Benutzerdefinierte Größe für dieses bestimmte Bild verwendet wurde.
Wenn Sie dies im Gerätemodus testen, werden Sie feststellen, dass bei Gerätegrößen unter 768 Pixeln das Bild mit 100% der Breite des Ansichtsfensters angezeigt wird, und bei Größen über 768 Pixeln wird das Bild mit 768 Pixeln Breite angezeigt.
