web-dev-qa-db-ger.com

Wie kann ich mit WordPress je nach Bildschirmgröße unterschiedliche Bilder bereitstellen?

Ich erstelle eine responsive WordPress-Website mit einem Mobile-First-Ansatz.

Wenn mein Client ein Bild für einen Blog-Beitrag hochlädt, möchte ich, dass WordPress dann kleinere Versionen des Bildes (mit einer kleineren Dateigröße!) Generiert, die dann auf kleinere Bildschirmgrößen geliefert werden?

Auch wenn der Benutzer mehrere Versionen des Bildes selbst hochladen muss, ist dies eine gute Lösung.

Ich bin mir bewusst, dass es eine Funktion namens add_image_size gibt, aber ich glaube, dies ändert nur die Abmessungen des Bildes und nicht die tatsächliche Dateigröße. Die unterschiedlichen Dateigrößen sind hier das Wichtigste.

Gibt es ein Plugin oder einen Code, den ich schreiben muss, um dies zu ermöglichen?

Ich freue mich auf jede Hilfe oder Beratung zu dieser Frage.

Vielen Dank

3
Adam

add_image_size ändert die tatsächliche Größe der Bilddatei.

Was ich versucht habe:

function odevice_image_sizes() {
    add_image_size( 'iphone-size', 300, 100, true );//OF course the dimensions are not correct...
    add_image_size( 'tablet-size', 600, 300, true );
}


function show_odevice_at_img_select($sizes) {
    $sizes['iphone-size'] = __( 'Image size for iphone' );
    $sizes['tablet-size'] = __( 'image size for tablet' );

    return $sizes;
}
add_action( 'init', 'odevice_image_sizes' );
add_filter('image_size_names_choose', 'show_odevice_at_img_select');

Wenn Sie nach dem Gerätetyp suchen (iPhone oder Tablet), können Sie die benutzerdefinierten Bilder wie folgt verwenden

<?php the_post_thumbnail( 'iphone-size' ); ?>

Ich kann Ihnen keinen Screenshot senden, da ich nicht den erforderlichen Ruf habe. Sie können jedoch im Upload-Ordner feststellen, dass die mit Ihren benutzerdefinierten Abmessungen eingegebenen Bilder eine andere Größe haben (auf der Festplatte), sodass sie unterschiedliche Bandbreite beanspruchen. Kleinere Abmessungen, geringere Bandbreite.

1
panos

panos hat es richtig gemacht. Sie können add_image_size verwenden, um Bilder unterschiedlicher Größe für unterschiedliche Zwecke zu erstellen. Um mit Ihrer Frage noch etwas weiter fortzufahren, möchte ich Folgendes hinzufügen:

Sobald Sie mit add_image_size verschiedene Bildgrößen erstellt haben, können Sie diese mit dem Wordpress-Plugin Mobble (oder einer anderen php-basierten Geräteerkennung) für verschiedene Geräte bereitstellen. http://wordpress.org/plugins/mobble

Führen Sie einfach eine einfache if else-Anweisung wie folgt aus:

if ( is_mobile() ) : the_post_thumbnail( 'mobile-size' );
elseif( is_tablet() ) : the_post_thumbnail( 'tablet-size' );
else : the_post_thumbnail( 'full' );
endif;
0
jounileander

Der einfachste Weg ist die Verwendung von css

Ich verwende den folgenden Code für meine Website.

.your_div img {
height:auto;
max-width:100%;
}

Ich hoffe, der obige CSS-Code kann Ihnen helfen.

0
v123shine