web-dev-qa-db-fra.com

Comment afficher une taille d'image différente pour le mobile

J'ai mis en place ce qui suit:

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

qui est utilisé pour dessiner une image en pleine largeur sur le site Web que je suis en train de construire, mais, comme vous pouvez l’imaginer, il est redimensionné pour mobile à une hauteur ridiculement petite et semble vraiment étrange sur mobile.

J'ai créé une nouvelle taille d'image que j'ai nommée 'featured-image-mobile' et qui a les dimensions 650px by 448px .

Sur la page actuelle, je montre l’image pleine largeur comme ceci:

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

Est-ce qu'il y a un moyen de garder

the_post_thumbnail_url( 'featured-image' );

pour tout sauf une résolution d'écran de 650px , puis changez la taille de l'image comme suit?

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

WordPress wp_is_mobile() peut être la fonction que vous recherchez.

// 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');
}
3
Jean-Rémi LARCELET-PROST

Vous pouvez sortir les deux images et basculer simplement entre les deux en utilisant css (je n'utilise que des classes d'amorçage de base ici et j'élimine les balises inutiles pour des raisons de clarté):

<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>

Vous pouvez également ajouter la version mobile de l'image en tant qu'attribut personnalisé:

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

Et ensuite, changez la source de l'image avec Javascript sur mobile.

2
Svartbaard