Ich habe vor kurzem an einem Fotografie-Thema gearbeitet und eines der Dinge, die ich implementiert habe, ist ein mobiler „Stil“. Im Gegensatz zu den üblichen responsiven Designs, die sich unabhängig vom Gerät an Ihre Browsergröße anpassen, habe ich es so eingerichtet, dass mobiles CSS/Js nur auf Tablets und Handheld-Geräten geladen wird. Nun, bei den Desktop-/Laptop-Versionen möchte ich ein bestimmtes Design beibehalten, das erfordert, dass einige Bilder eine feste Höhe, aber eine beliebige Breite haben, bei der mobilen Version möchte ich jedoch, dass dieselben Bilder eine unbegrenzte Höhe, aber eine feste Breite haben.
Lösung?
Ich habe vor kurzem ein ziemlich süßes Skript namens „Mobile Detect“ gefunden, mit dem ich meine CSS/Js nur auf Mobilgeräten geladen habe. Warum also nicht dasselbe Skript verwenden, um unterschiedliche Bildgrößen für Mobilgeräte anzuzeigen? Im Folgenden zeige ich Ihnen, wie Sie dieses großartige Skript zusammen mit der Aqua-Resizer-Funktion zur Größenänderung von Bildern verwenden können, um zwei verschiedene Bildgrößen zu erstellen – eine für normale Computer und eine für mobile Geräte.
Wie es geht?
Das erste, was Sie tun möchten, ist die Aqua Resizer-Funktion und die Handy-Erkennung php-Klasse in dein Theme/Plugin. Entweder über die functions.php oder in einer separaten Datei mit der Funktion require().
Aqua Resizer
Die Aqua Resizer-Funktion ist sehr einfach zu bedienen. Unten sehen Sie ein Beispiel dafür, wie man es zu einem Thema hinzufügen würde, um das vorgestellte Bild eines Beitrags anzuzeigen:
<?php
//get and crop featured image to 600px (width) and 150px (height)
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 600, 300, true ); ?>
<img src="<?php echo $featured_image; ?>" />
Handy-Erkennung
Die Mobile-Klasse ist wirklich einfach zu verwenden. Hier ist ein Beispiel dafür, wie Sie testen können, ob ein Besucher auf einem mobilen Gerät ist:
<?php
$detect = new Mobile_Detect();
if ( $detect->isMobile() ) {
// Any mobile device.
} ?>
Kombinieren Sie Aqua Resizer und Mobile Detect
Nehmen wir nun an, ich möchte ein viel kleineres Bild (halbe Größe) für alle mobilen Benutzer anzeigen. Dies kann ich so tun:
<?php
$detect = new Mobile_Detect();
if ( $detect->isMobile() ) {
// Featured image for mobile users
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 300, 150, true );
} else {
// Featured image for all other users
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 600, 300, true );
} ?>
<img src="<?php echo $featured_image; ?>" />
Wie Sie sehen, ist es wirklich ganz einfach und öffnet viele Fenster für Möglichkeiten. Sie können es verwenden, um größere Bilder für Retina-Displays bereitzustellen (Mobile Detect ist sehr umfangreich, Sie können sogar für einzelne Geräte, Betriebssysteme, Gerätegruppen und mehr testen), um kleinere Bilder für schnelleres mobiles Surfen anzuzeigen oder wie ich es verwende , um unterschiedliche Proportionen für Bilder auf Mobilgeräten anzuzeigen.
Hinweis: Kann man natürlich auch gebrauchen Thumbnails posten indem Sie die zu verwendende Bildgröße definieren. Ich habe mich für den Aqua Resizer entschieden, weil dies die Funktion ist, die ich in letzter Zeit in meinem Thema verwende, da Sie keine Miniaturansichten neu generieren müssen, wenn Sie neue Bildgrößen hinzufügen oder aktuelle ändern.