web-dev-qa-db-ger.com

So zeigen Sie eine andere Bildgröße für Handys an

Ich habe folgendes eingerichtet:

add_image_size( 'featured-image', 1600, 450, true );

das wird verwendet, um ein Bild in voller Breite auf der Website zu liefern, die ich gerade erst baue. Wie Sie sich vorstellen können, wird dies für Mobilgeräte auf eine lächerlich kleine Höhe skaliert und sieht auf Mobilgeräten wirklich seltsam aus.

Ich habe eine neue Bildgröße erstellt, die ich 'featured-image-mobile' genannt habe und die Abmessungen 650px von 448px hat.

Auf der aktuellen Seite zeige ich das Bild in voller Breite wie folgt an:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>"
    alt="<?php echo $altTag; ?>"
    title="<?php echo $titleTag; ?>">

Gibt es einen Weg, den ich behalten kann?

the_post_thumbnail_url( 'featured-image' );

für alles außer einer Bildschirmauflösung von 650px , und ändern Sie die Bildgröße wie folgt?

the_post_thumbnail_url( 'featured-image-mobile' );
1
rebeccasmith_me

WordPress wp_is_mobile() kann die Funktion sein, nach der Sie suchen.

// Use the build-in function if WP
if(wp_is_mobile()) // On mobile
{
    the_post_thumbnail_url('featured-image-mobile');
}
else
{
    the_post_thumbnail_url('featured-image');
}

Sie könnten beide Bilder ausgeben und einfach mit CSS zwischen den beiden wechseln (ich verwende hier nur grundlegende Bootstrap-Klassen und verzichte aus Gründen der Klarheit auf unnötige Markups):

<div class="featured-image hidden-xs">
   <img src="<?php the_post_thumbnail_url( 'featured-image' )?>">
</div>

<div class="featured-image-mobile visible-xs-block">
   <img src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">
</div>

Alternativ können Sie die mobile Version des Bildes als benutzerdefiniertes Attribut hinzufügen:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>" data-mob-src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">

Und schalten Sie anschließend die Quelle des Bildes mit Javascript auf dem Handy.

2
Svartbaard