wake-up-neo.net

So verwenden Sie die Funktion für reaktionsschnelle Bilder von WP 4.4 in deinen Themes

Ich verstehe nicht wirklich, wie ich die neue Funktion für reaktionsschnelle Bilder verwenden kann, die WordPress in meinen Themen bereitstellt.

Beispiel:

In meinem Theme füge ich ein Header-Bild hinzu. Ich benutze daher das Custom-Header-Image aus Customizer OR das Post-Thumbnail:

<figure id="header-image" class="uk-margin-remove">
<?php if ( ( is_single() || ! is_home() ) && has_post_thumbnail() ) : ?>
    <?php the_post_thumbnail(); ?>
<?php else: ?>
    ???
<?php endif; ?>
</figure>

Im ersten Fall lautet die Ausgabe also wie folgt:

<img src="http://xxx.dev/wp-content/uploads/x.jpg" srcset="http://xxx.dev/wp-content/uploads/x-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/x-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/x-1024x241.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" alt="">

das ist vollkommen in Ordnung. Wenn ich ein Bild nach Anhang-ID anzeigen möchte, erhalte ich unabhängig von der verwendeten Funktion nicht die erwartete Ausgabe.

Beispiel:

Im obigen Code sehen Sie "???". An diesem Ort habe ich einige Dinge ausprobiert. Zum Beispiel das:

<?php echo wp_get_attachment_image( get_custom_header()->attachment_id, 'full' ); ?>

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

<img src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg" class="attachment-full size-full" alt="Delft_IMG_6275" srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w, http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" height="451" width="1920">

Wie lassen sich Bilder in einem Thema korrekt anzeigen, sodass ein ähnliches Ergebnis wie bei the_post_thumbnail() angezeigt wird?

2
SVARTBERG

Nach unserem Austausch in den Kommentaren habe ich Ihre Frage noch einmal gelesen und habe eine ziemlich einfache Antwort:

Es sieht so aus, als würde es gut funktionieren.

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

<img 

src="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg" 

class="attachment-full size-full" alt="Delft_IMG_6275" 

srcset="http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922.jpg 1920w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-300x70.jpg 300w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-768x180.jpg 768w,
http://xxx.dev/wp-content/uploads/Delft_IMG_6275-e1453192498922-1024x241.jpg 1024w"

sizes="(max-width: 1920px) 100vw, 1920px"

height="451" width="1920">

Ihr Browser liest die Attribute wie folgt:

1 - Sehen Sie sich das Attribut sizes an und suchen Sie die erste Übereinstimmung für die aktuelle Ansichtsfensterbreite. In diesem Fall verwenden Sie den Wert 1920px, der in px konvertiert wurde, wenn das Ansichtsfenster eine Breite von 100vw hat, andernfalls verwenden Sie 1920px.

2 - Sehen Sie sich das Attribut srcset an und wählen Sie ein Bild aus, das zum Wert von (1) passt.

Auf einem schönen großen Bildschirm mit einem Fenster voller Breite wählt der Browser den Wert 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 verwiesen.

Auf einem iPad im Hochformat, dessen Ansichtsfenster 768pxweit ist, lautet der in (1) ermittelte Wert 100vw, der für dieses Ansichtsfenster 768px lautet. Wenn wir in der srcset nach 768w suchen, erhalten wir die URL zur medium_large-Bildgröße (eine neue Standardgröße in WP4.4, die in der Admin-Oberfläche nicht angezeigt wird).

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

Unter bestimmten Umständen möchten Sie möglicherweise eine längere Liste von Bildern bereitstellen, die Sie mit add_image_size() in Ihrem Design hinzufügen können. WP erstellt ein srcset-Attribut unter Verwendung aller Bilder, die dem Seitenverhältnis der Bildgröße entsprechen, die Sie zur Anzeige auswählen.

Es gibt auch Umstände, in denen Sie ein benutzerdefiniertes Attribut sizes wünschen und Sie können das Attribut danach filtern, aber so wie Ihre Frage steht, denke ich nicht, dass Sie danach suchen.

1

Auf der einen Seite gibt es nichts, was Sie tun sollten, auf der anderen Seite erstellt WordPress keine reaktionsfähigen Bilder.

Wordpress erstellt jedes Mal srcsetAttribute, wenn Sie die bildbezogenen APIs basierend auf den registrierten Bildgrößen verwenden, wobei alle Bilder dem Seitenverhältnis entsprechen. Sie müssen lediglich die relevanten Bildgrößen registrieren lassen, damit WordPress die Bilder generieren kann, und sie in einem srcsetverwenden.

In Ihrem "fehlgeschlagenen" Beispiel werden Vollbilder niemals reagieren, da WordPress keine Bilder generiert, die größer als das Originalbild sind (und es in jedem Fall schwierig ist, eine Bilderzeugung für die Größe zu codieren, die von einem Bild zum 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 beispielsweise ein 150x150-Miniaturbild auch auf die x2-Retina übertragen möchten, müssen Sie sowohl eine 150x150-Größe als auch eine 300x300-Größe registrieren. Wenn Sie auf Mobilgeräten einen Speicherplatz von 50 x 50 für das Miniaturbild zuweisen, müssen Sie auch eine Größe von 50 x 50 und 100 x 100 (für die Netzhaut) registrieren. Sie sind sich nicht sicher, ob dies in der Praxis sinnvoll ist, aber das ist die Theorie.

Rant: Es ist eine Beleidigung für die Intelligenz, den WordPress-Kern einer Funktion zu nennen. Es ist ein Süßstoff, der Ihnen dabei hilft, viele API-Aufrufe zu vermeiden, aber es hilft Ihnen nicht dabei, tatsächlich die Größe zu entwerfen, die Sie tatsächlich benötigen, und es ist trotzdem mühsam, WordPress so zu konfigurieren, dass es diese verwendet.

0
Mark Kaplun

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

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

BEARBEITEN:

@Downvoter sagen, warum Sie abstimmen. Ich stimme zu, dass ich in gewisser Weise falsch lag, aber Sie hätten sagen können: "Ja, Sie können ein Array verwenden, um die Größe des Bildes zu bestimmen, ABER es wird nur die Größe verwendet, die einer definierten Bildgröße am nächsten kommt.

Definierte Bilder werden entweder im Medienbereich von EINSTELLUNGEN-> MEDIEN im Backend-Admin festgelegt. Dies sind "Miniaturansicht", "Mittel" und "Voll" OR, und Sie können add_image_size('name-you want-use', 340, 230, true); in Ihren Funktionen verwenden Datei ETC ... ETC ..

0
Malisa