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

Ich habe eine brillante Idee und da WordPress sich bereits um einige Arbeiten kümmert, muss ich nur eine gute Methode finden, um das zu schaffen.

Ich arbeite an einem Projekt, das auf alle Geräte reagieren muss, egal ob es sich um einen Desktop-PC oder ein mobiles Gadget handelt. Daher möchte ich, dass die Bilder auch reaktionsfähig sind, was bedeutet, dass mobile Geräte keine 50 KB + Bilder laden sollten.

Für jede Seite oder jeden Beitrag kann ich ein ausgewähltes Bild mithilfe von Miniaturansichten hinzufügen, das bei voller Größe etwa 950 x 250 bei ~ 60 KB beträgt. Wenn ich die Website auf ein iPhone / Android-Gerät lade, möchte ich nicht, dass das ~ 60KB-Bild geladen wird, sondern möchte, dass das kleine Miniaturbild an seine Stelle geladen wird.

Die Standardmethode für reagierende Bilder besteht darin, die Breite des Bilds auf 100% des übergeordneten Containers zu setzen. Daher wird die Größe automatisch angepasst, wenn der übergeordnete Container ebenfalls in der Größe geändert wird. Nicht die beste Methode für größere Bilder.

Ich dachte daran, das reagierende Bildskript der Filament Group auszuprobieren , aber ich habe es ausprobiert und es hat nicht richtig funktioniert. Eine Möglichkeit, dies zu erreichen, besteht in der Benutzeragentenerkennung, aber ich möchte diese Methode auch nicht anwenden, da Benutzeragenten gefälscht werden können.

Hier ist eine weitere Methode, um Bilder im Handumdrehen zu skalieren , aber dies scheint zu kopieren, was WordPress bereits getan hat.

Wenn es eine Möglichkeit gibt, dies mit den Media Gallery-Bildern zu tun, wäre WordPress Standard, wobei alle in der Größe veränderten Thumbnails bereits erstellt wurden, was vorzuziehen wäre.

Solutions Collecting From Web of "Was ist der beste Weg, um das Featured Image für Responsive Webdesign zu verwenden?"

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 Ihre gewählten Mittel, um den Kunden zu bestimmen. Es gibt mehrere Möglichkeiten, und welche Methode Sie verwenden, liegt außerhalb des Bereichs dieser Frage. Wenn Sie jedoch eine für Sie $mobile_device = true; Methode verwenden, geben Sie das Ergebnis in eine Variable aus, z. B. $mobile_device = true;

Schritt 3:

Geben Sie in Ihren Vorlagendateien das Bild bedingt basierend auf dem Client 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 einen switch ) für mehrere Formfaktoren (dh Bildschirmgrößen) wiederholen. Fügen Sie einfach mehrere benutzerdefinierte Bildgrößen hinzu und testen Sie für jede Bildschirmgröße, die Sie unterstützen möchten, bedingt.

Der beste Weg besteht darin, ein flüssiges Gitter zu verwenden, um das WordPress-Theme zu erstellen und die Werte für Breite und Höhe der vorgestellten Bilder durch eine function zur proportionalen Skalierung zu entfernen. Ein Tutorial über die Erstellung 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; } 

Entfernen der automatischen Höhe und Breite in WordPress -Tags

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

Um die Bilder proportional in WordPress skalierbar zu machen, müssen wir die automatischen Werte für Breite und Höhe entfernen WordPress für < img > Tags hinzufügen.

Als ein Beispiel müssen wir das ändern:

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

Zu diesem:

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

Für die Bilder, die sich in einer Post- oder statischen Seite / Schablonenseite befinden, müssen Sie style.css das obige CSS zur Datei style.css hinzufügen und dann die Eigenschaften 'width' und 'height' aus dem < img > entfernen < img > Markieren Sie in Ihrem WordPress-Editor. Das ist es!

Aber für das Bild, das von WordPress dynamisch angezeigt wird, wie Post-Thumbnails, müssen Breite und Höhe dynamisch mit einer function entfernt werden.

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

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

Wenn Sie dann auf der Seite template.php diese Post-Thumbnail-Bilder aufrufen, ersetzen Sie:

 the_post_thumbnail(); 

Mit diesem:

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

Das ist es. Ziehe die Größe des Browsers und verändere die Größe, um deine responsiven WordPress-Bilder in Aktion zu sehen!


Methode 2:

Das obige funktioniert nicht für einige Themen.

Wenn Sie zu den wenigen gehören, die nicht funktionieren, können Sie Ihr Bildproblem mit der function unten lösen.

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

Dadurch werden Inline-Attribute für Breite und Höhe aus Bildern entfernt, die mit the_post_thumbnail() abgerufen wurden, und verhindert, dass diese Attribute zu 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; } 

Eine Möglichkeit, dies zu erreichen, besteht in der Benutzeragentenerkennung, aber ich möchte diese Methode auch nicht anwenden, da Benutzeragenten gefälscht werden können.

Dies ist keine schlechte Methode und ist eigentlich der Industriestandard, eine gute WURFL hat eine sehr hohe Genauigkeitsbewertung, die, die ich verwendet und getestet habe, lieferte immer solide Ergebnisse und unabhängige Tests (über das, was ich tun würde) scheinen sie zu haben die 98% + Reichweite. Wen kümmert es, wenn ein lahmer Bot einen User-Agent spoofing, sind sie aus gutem Grund sowieso nicht da.

Für Schritt 2 finde ich entweder eine Methode, die eigentlich schneller ist, eine PHP-unterstützte WURFL- oder CSS-Medienabfrage.

Zuerst müssen Sie “best” definieren. Meine Definition wäre: Rendert das Bild mit dem beabsichtigten Effekt des Designers auf jedem Gerät oder Bildschirm. Rendert das Bild mit der gleichen Qualität wie das Original. Verbraucht das absolut minimale Maß an System- und Personalressourcen (dh Bandbreite, CPU, Designer / Programmierer Zeit)

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

  1. Laden Sie das Bild in voller Größe und lassen Sie den Browser für das Layout skalieren. Definieren Sie das Bild max-width als 100% und lassen Sie es um die Breite seines Containers herunterskalieren.

Vorteile: Erfordert nahezu ohne Aufwand zu implementieren, Cross-Browser-kompatibel und unterstützt von älteren Browsern.

Nachteile: Oft werden mehr Daten als erforderlich heruntergeladen und die CPU-Zyklen werden auf dem Client reduziert (langsam). Abhängig vom Skalierungsalgorithmus des Browsers können Bilder mit sehr schlechter Qualität angezeigt werden. Keine Möglichkeit zur künstlerischen Ausrichtung und kann das Bild für Retina-Displays nicht anpassen.

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

Vorteile: Schnellerer Download auf mobilen Geräten. Kann Retina-Displays verarbeiten. Verbesserte Bildqualität, da Bilder hoffentlich mit einer qualitativ hochwertigen Methode verarbeitet wurden. Künstlerische Richtung wird möglich.

Nachteile: Jemand muss Zeit damit verbringen, mehrere Versionen desselben Bildes zu bearbeiten, zu beschneiden und zu verwalten. Mehr Kodierung: Sie müssen nun jede Version des Bildes in irgendeiner Weise buchstabieren und Medienabfragen für alle gewünschten Layouts erstellen. Wiederholen Sie das oben für jedes Bild, das Sie bedienen. functioniert nur für Browser, die CSS3 Media Queries oder die neuen Tags unterstützen.

  1. Machen Sie das Back-End Optimieren Sie Bilder für jeden Bildschirm oder Layout mit einem einzigen Bildquelle im laufenden Betrieb. Meiner Meinung nach ist dies gleichbedeutend mit der Behandlung von responsiven Bildern als Content-Negotiation-Aufgabe ähnlich wie HTTP.

Vorteile: Designer muss keine Zeit damit verbringen, Bilder zu verarbeiten und mehrere Versionen zu verwalten. Das optimalste Bild wird jedes Mal gesendet. Kann mit Retina-Displays umgehen und sich dynamisch an die künstlerische Richtung anpassen (allerdings mit etwas mehr Aufwand – muss wissen, wo der Fokus liegt). Keine spezielle oder extra Markup erforderlich (Einschränkung unten). Cross-Browser-kompatibel und funktioniert für ältere Browser.

Nachteile: Sie müssen Informationen über die Browser- und Bildschirmeigenschaften des Clients erfassen und übertragen. Das erste Mal, wenn ein Bild geladen wird, kann langsamer sein als bei jedem anderen Ansatz, da das Bild verarbeitet werden muss (wird typischerweise für spätere Anforderungen zwischengespeichert).