web-dev-qa-db-fra.com

Comment puis-je servir différentes images en fonction de la taille de l'écran avec wordpress

Je crée un site Web WordPress réactif avec une approche mobile.

Lorsque mon client télécharge une image pour un article de blog, je souhaite que WordPress génère ensuite de plus petites versions de l'image (avec une taille de fichier plus petite!) Qui seront ensuite diffusées sur des écrans de taille inférieure?

Même si l'utilisateur doit télécharger lui-même plusieurs versions de l'image, ce serait quand même une bonne solution.

Je sais qu’il existe une fonction appelée add_image_size, mais j’estime que cela ne fait que modifier les dimensions de l’image, et non la taille réelle du fichier. Les différentes tailles de fichiers sont la chose la plus importante ici.

Y a-t-il un plugin ou un code que je dois écrire pour l'activer?

J'ai hâte de recevoir de l'aide ou des conseils sur cette question.

Merci

imagesresponsive
3
Adam

add_image_size change la taille réelle du fichier image.

Ce que j'ai essayé:

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');

Lors de la vérification du type d'appareil (iphone ou tablette), vous pouvez utiliser les images personnalisées comme ceci

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

Je ne peux pas vous envoyer de capture d'écran car je n'ai pas la réputation qui s'impose. Mais vous pouvez voir dans le dossier de téléchargement que les images entrées avec vos dimensions personnalisées auront une taille différente (sur le disque) et consomment donc une bande passante différente. Plus les dimensions sont petites, plus la bande passante est petite.

1
panos

panos a bien compris. Vous pouvez utiliser add_image_size pour créer des images de différentes tailles à des fins différentes. Pour continuer un peu plus loin avec votre question, je veux ajouter:

Une fois que vous avez créé différentes tailles d’images avec add_image_size, vous pouvez les servir pour différents périphériques en utilisant le plugin Wordpress Mobble (ou toute autre reconnaissance de périphérique basée sur php) http://wordpress.org/plugins/mobble

Il suffit de faire une simple déclaration if else, par exemple:

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

Le moyen le plus simple consiste à utiliser css

J'utilise le code suivant sur mon site.

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

J'espère que le code css ci-dessus peut vous aider.

0
v123shine