wake-up-neo.net

Was ist der beste Weg, um das Featured Image für ein responsives Webdesign zu verwenden?

Ich habe eine großartige Idee und da sich WordPress bereits um einen Teil der Arbeit kümmert, muss ich nur eine gute Methode finden, um diese Arbeit zu machen.

Ich arbeite an einem Projekt, das auf alle Geräte reagieren muss, sei es auf einem Desktop-PC oder einem mobilen Gerät. Daher möchte ich, dass die Bilder auch reagieren, dh, dass mobile Geräte keine Bilder mit mehr als 50 KB laden sollten.

Für jede Seite oder jeden Beitrag kann ich ein Bild mit den Miniaturansichten der Beiträge hinzufügen, wobei das Bild in voller Größe etwa 950 x 250 bei ~ 60 KB groß ist. Wenn ich die Website auf ein iPhone/Android-Gerät lade, möchte ich nicht, dass das ~ 60-KB-Bild geladen wird, sondern dass das kleine Miniaturbild an seiner Stelle geladen wird.

Die Standardmethode für reaktionsschnelle Bilder besteht darin, die Breite des Bildes auf 100% des übergeordneten Containers einzustellen. Die Größe wird daher automatisch geändert, wenn die Größe des übergeordneten Containers ebenfalls geändert wird. Nicht die beste Methode für größere Bilder.

Ich habe darüber nachgedacht, das responsive Image-Skript der Filament Group auszuprobieren, aber ich habe es versucht, und es hat nicht richtig funktioniert. Eine Möglichkeit, dies zu erreichen, ist die Erkennung von Benutzeragenten, aber ich würde diese Methode auch nicht bevorzugen, da Benutzeragenten gefälscht werden können.

Hier ist eine andere Methode zum Ändern der Größe von Bildern im laufenden Betrieb , aber dies scheint das zu duplizieren, was WordPress bereits getan hat.

Wenn es eine Möglichkeit gibt, dies mit den Mediengalerie-Bildern zu tun, die WordPress standardmäßig verwendet, ist dies vorzuziehen, wenn alle verkleinerten Miniaturansichten bereits erstellt wurden.

8
micah

Schritt 1:

Definieren Sie zwei benutzerdefinierte Bildgrößen, z.

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Schritt 2:

Implementieren Sie die von Ihnen gewählten Mittel, um den Kunden zu bestimmen. Es gibt verschiedene Möglichkeiten, und welche Methode Sie verwenden, liegt außerhalb des Rahmens dieser Frage. Angenommen, Sie haben eine Methode, die für Sie funktioniert, geben Sie das Ergebnis in einer Variablen aus, z. B. $mobile_device = true;.

Schritt 3:

Geben Sie in Ihren Vorlagendateien das Bild basierend auf dem Client bedingt aus.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Hinweis: Sie können den if/else (oder eine switch) für mehrere Formfaktoren (d. H. Bildschirmgrößen) wiederholen. Fügen Sie einfach mehrere benutzerdefinierte Bildgrößen hinzu und testen Sie unter bestimmten Bedingungen jede Bildschirmgröße, die Sie unterstützen möchten.

9
Chip Bennett

Der beste Weg ist, ein flüssiges Gitter zu verwenden, um das WordPress-Thema zu erstellen und die Werte für Breite und Höhe der vorgestellten Bilder durch eine Funktion zur proportionalen Skalierung zu entfernen. A Tutorial zum Reagieren von WordPress-Bildern :

Methode 1: Das CSS

Fügen Sie Ihrer CSS-Datei den folgenden Code hinzu. Dadurch werden die Bilder entsprechend der Bildschirmgröße skalierbar.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Automatische Höhe und Breite in WordPress <img> Tags entfernen

Ziehen Sie nun das Fenster, um die Bildskalierung in Aktion zu sehen. Sie werden feststellen, dass sich die Bilder in Ihrem WordPress-Blog merkwürdig skalieren lassen. Sie horizontale Skalierung fein, aber vertikale Skalierung in WordPress-Bildern sind alle falsch.

Um die Größe der Bilder in WordPress proportional zu ändern, müssen die automatischen Werte für Breite und Höhe, die WordPress für < img >-Tags hinzufügt, entfernt werden.

Als Beispiel müssen wir das ändern:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

Dazu:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

Für die Bilder, die sich in einem Beitrag oder einer statischen Seite/Vorlagenseite befinden, müssen Sie lediglich das oben genannte CSS zur Datei style.css hinzufügen und dann die Eigenschaften ‘width’ und ‘height’ aus dem Tag < img > in Ihrem WordPress-Editor entfernen. Das ist es!

Bei Bildern, die von WordPress dynamisch angezeigt werden, wie z. B. Post-Thumbnails, müssen Breite und Höhe mithilfe einer Funktion dynamisch entfernt werden.

Fügen Sie Ihrer functions.php-Datei die folgende Funktion hinzu.

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

Wenn Sie dann diese Post-Thumbnails in Ihrer template.php-Seite aufrufen, ersetzen Sie:

the_post_thumbnail();

Mit diesem:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

Das ist es. Ziehen Sie den Browser und ändern Sie die Größe, um Ihre reaktionsschnellen WordPress-Bilder in Aktion zu sehen!


Methode 2:

Das oben Genannte funktioniert bei einigen Themen nicht.

Wenn Sie einer der wenigen sind, bei denen dies nicht funktioniert hat, können Sie das Bildproblem mithilfe der folgenden Funktion beheben.

Fügen Sie Ihrer functions.php-Datei die folgende Funktion hinzu.

Dadurch werden Inline-Attribute für Breite und Höhe von Bildern entfernt, die mit the_post_thumbnail() abgerufen wurden, und es wird verhindert, dass diese Attribute neuen Bildern hinzugefügt werden, die dem Editor hinzugefügt wurden.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}
1
Thanushka

Eine Möglichkeit, dies zu erreichen, ist die Erkennung von Benutzeragenten, aber ich würde diese Methode auch nicht bevorzugen, da Benutzeragenten gefälscht werden können.

Dies ist keine schlechte Methode und entspricht dem Industriestandard. Ein guter WURFL weist eine sehr hohe Genauigkeit auf. Die von mir verwendeten und getesteten Methoden haben immer solide Ergebnisse geliefert, und unabhängige Tests (über das hinaus, was ich tun würde) scheinen sie zu liefern der 98% + Bereich. Wen kümmert es, wenn ein lahmer Bot einen User-Agent fälscht, der ist sowieso aus gutem Grund nicht da.

Bei Schritt 2 kommt es meiner Meinung nach auf eine der beiden Methoden an, die tatsächlich schneller ist, nämlich eine von PHP unterstützte WURFL- oder CSS-Medienabfrage.

0
Wyck

Zuerst muss man "am besten" definieren. Meine Definition lautet: Rendert das Bild mit dem vom Designer beabsichtigten Effekt auf einem beliebigen Gerät oder Bildschirm. Rendert das Bild mit der gleichen Qualität wie das Original. Verbraucht das absolute Minimum an System- und Personalressourcen (d. H. Bandbreite, CPU, Designer-/Programmiererzeit).

Hier sind die Ansätze, die ich bisher gesehen habe:

  1. Laden Sie das Bild in voller Größe und lassen Sie es vom Browser verkleinern, um es an das Layout anzupassen. Definieren Sie die maximale Breite des Bildes als 100% und lassen Sie es um die Breite seines Containers verkleinern.

Vorteile: Erfordert kaum Implementierungsaufwand, ist browserübergreifend kompatibel und wird von älteren Browsern unterstützt.

Nachteile: Häufig werden mehr Daten als erforderlich heruntergeladen und anschließend CPU-Zyklen auf dem Client ausgeführt, um ihn zu verkleinern (langsam). Je nach Skalierungsalgorithmus des Browsers erhalten Sie möglicherweise Bilder mit sehr schlechter Qualität. Keine Möglichkeit zur künstlerischen Leitung und Bildanpassung für Retina-Displays nicht möglich.

  1. Verwenden Sie Medienabfragen, um die Eigenschaften des Clients zu lesen und eines von mehreren angepassten Bildern für verschiedene Haltepunkte in Ihrem Entwurf abzurufen. (Die Tags "HTML Responsive Images Extension" und "srcset" arbeiten daran, diesen Ansatz in die HTML-Spezifikation zu integrieren.).

Vorteile: Schnellerer Download auf Mobilgeräten. Kann Retina-Displays handhaben. Verbesserte Bildqualität, da Bilder hoffentlich mit einer Methode hoher Qualität verarbeitet wurden. Künstlerische Leitung wird möglich.

Nachteile: Jemand muss Zeit damit verbringen, mehrere Versionen desselben Bildes zu bearbeiten, zuzuschneiden und zu verwalten. Mehr Codierung: Sie müssen jetzt jede einzelne Version des Bildes auf irgendeine Weise buchstabieren und Medienabfragen für alle gewünschten Layouts erstellen. Wiederholen Sie die obigen Schritte für jedes einzelne Bild, das Sie liefern. Funktioniert nur mit Browsern, die CSS3 Media Queries oder die neuen Tags unterstützen.

  1. Machen Sie das Backend Optimieren Sie Bilder für jeden Bildschirm oder jedes Layout mit einem einzigen Quellbild im laufenden Betrieb. Meiner Meinung nach entspricht dies der Behandlung von reaktionsschnellen Bildern als Aufgabe der Inhaltsverhandlung, ähnlich wie bei HTTP.

Vorteile: Designer muss keine Zeit für die Verarbeitung von Bildern und die Verwaltung mehrerer Versionen aufwenden. Jedes Mal wird das Bild mit der optimalen Größe gesendet. Kann Retina-Displays handhaben und sich dynamisch der künstlerischen Ausrichtung anpassen (allerdings mit einigem Aufwand - muss man wissen, wo man sich konzentrieren muss). Kein spezielles oder zusätzliches Markup erforderlich (Einschränkung unten). Cross-Browser-kompatibel und funktioniert mit älteren Browsern.

Nachteile: Sie müssen Informationen zu den Browser- und Bildschirmeigenschaften des Clients erfassen und übertragen. Das erstmalige Laden eines Bildes kann langsamer sein als bei jedem anderen Ansatz, da das Bild verarbeitet werden muss (wird normalerweise für spätere Anforderungen zwischengespeichert).

0
learnweb