web-dev-qa-db-fra.com

Quelle est la meilleure façon d'utiliser l'image sélectionnée pour une conception Web réactive?

J'ai une idée brillante et comme WordPress prend déjà en charge une partie du travail, je dois juste trouver une bonne méthode pour le faire.

Je travaille sur un projet qui doit être adapté à tous les appareils, qu'il s'agisse d'un ordinateur de bureau ou d'un gadget mobile. Par conséquent, je souhaite que les images soient également réactives, ce qui signifie que les appareils mobiles ne doivent pas charger des images de plus de 50 Ko.

Pour chaque page ou publication, je peux ajouter une image sélectionnée à l'aide de miniatures de publication qui, en taille réelle, font environ 950x250 pixels à ~ 60 Ko. Si je charge le site Web sur un iPhone/Android, je ne voudrais pas que l'image de ~ 60 Ko soit chargé, mais je voudrais plutôt que la petite vignette se charge à sa place.

La méthode par défaut pour les images sensibles consiste à rendre la largeur de l'image égale à 100% du conteneur parent. Elle sera donc redimensionnée automatiquement si le conteneur parent est également redimensionné. Pas la meilleure méthode pour les grandes images.

J'ai pensé à essayer le script d'image réactif de Filament Group , mais je l'ai essayé et cela n'a pas fonctionné correctement. La détection d'agent utilisateur est un moyen d'y parvenir, mais je préférerais ne pas utiliser cette méthode non plus, car les agents utilisateur peuvent être usurpés.

Voici une autre méthode pour redimensionner les images à la volée , mais cela semble dupliquer ce que WordPress a déjà fait.

S'il existe un moyen de le faire avec les images de la Galerie multimédia que WordPress a été la valeur par défaut, avec toutes les vignettes redimensionnées déjà créées, cela serait préférable.

phpimagespost-thumbnailsmobile
8
micah

Étape 1:

Définissez deux tailles d'image personnalisées, par exemple:

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Étape 2:

Mettez en œuvre vos moyens choisis pour déterminer le client. Il y a plusieurs façons et la méthode que vous utilisez sort du cadre de cette question. Mais, en supposant que votre méthode fonctionne pour vous, exportez le résultat dans une variable, telle que $mobile_device = true;

Étape 3:

Dans vos fichiers de modèle, exportez l'image conditionnellement, en fonction du client.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Remarque: vous pouvez répéter le if/else (ou créer une switch) pour plusieurs facteurs de forme (tailles d'écran, par exemple). Ajoutez simplement plusieurs tailles d'image personnalisées et testez conditionnellement chaque taille d'écran que vous souhaitez prendre en charge.

9
Chip Bennett

Le meilleur moyen consiste à utiliser un quadrillage fluide pour créer le thème WordPress et à supprimer les valeurs de largeur et de hauteur des images en vedette via une fonction de redimensionnement proportionnel. A tutoriel sur la réactivité des images WordPress :

Méthode 1: le CSS

Ajoutez le code suivant à votre fichier CSS. Cela rendra les images adaptables en fonction de la taille de l'écran.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Suppression de la hauteur et de la largeur automatiques dans les tags WordPress <img>

Maintenant, faites glisser la fenêtre pour voir l'image redimensionner en action. Vous remarquerez que les images de votre blog WordPress sont étrangement redimensionnées. La mise à l'échelle horizontale est fine mais la mise à l'échelle verticale dans les images WordPress est erronée.

Pour que les images puissent être redimensionnées proportionnellement dans WordPress, nous devons supprimer les valeurs automatiques de largeur et de hauteur que WordPress ajoute pour les balises < img >.

Par exemple, nous devons changer ceci:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

Pour ça:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

Pour les images qui se trouvent dans un article ou une page statique/modèle, tout ce que vous avez à faire est d'ajouter le code CSS ci-dessus au fichier style.css, puis supprimez les propriétés ‘width’ et ‘height’ de la balise < img > dans votre éditeur WordPress. C'est tout!

Mais pour les images affichées dynamiquement par WordPress, telles que les miniatures de publication, la largeur et la hauteur doivent être supprimées de manière dynamique à l'aide d'une fonction.

Ajoutez la fonction suivante à votre fichier functions.php.

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

Ensuite, lorsque vous appelez ces images miniatures dans votre page template.php, remplacez:

the_post_thumbnail();

Avec ça:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

C'est tout. Faites glisser et redimensionnez le navigateur pour voir vos images WordPress réactives en action!

Méthode 2:

Ce qui précède ne fonctionnera pas pour certains thèmes.

Si vous êtes l’un des rares qui n’a pas fonctionné, vous pouvez quand même résoudre votre problème d’image en utilisant la fonction ci-dessous.

Ajoutez la fonction suivante à votre fichier functions.php.

Cela supprime les attributs de largeur et de hauteur des images récupérées avec the_post_thumbnail() et empêche leur ajout à de nouvelles images ajoutées à l'éditeur.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}
1
Thanushka

La détection d'agent utilisateur est un moyen d'y parvenir, mais je préférerais ne pas utiliser cette méthode non plus, car les agents utilisateur peuvent être usurpés.

Ce n'est pas une mauvaise méthode et est en fait le standard de l'industrie, un bon WURFL a une très haute précision, ceux que j'ai utilisés et testés ont toujours donné des résultats solides et des tests indépendants (au-dessus de ce que je prendrais la peine de faire) semblent les avoir dans la gamme de 98% +. Qui se soucie de savoir si un bot boiteux usurpe un agent utilisateur, ils ne sont de toute façon pas là pour une bonne raison.

Pour l’étape 2, je pense que l’une ou l’autre des méthodes est la plus rapide, une requête multimédia WURFL ou CSS soutenue par PHP.

0
Wyck

Vous devez d’abord définir le "meilleur". Ma définition serait: Rend l’image avec l’effet escompté par le concepteur sur n’importe quel appareil ou écran Donne à l’image une qualité égale à celle de l’original Consomme le minimum absolu de ressources système et humaines (par exemple, bande passante, temps processeur/programmeur)

Voici les approches que j'ai vues jusqu'à présent:

  1. Chargez l'image en taille réelle et faites en sorte que le navigateur la réduise à sa taille. Définissez la largeur maximale de l'image sur 100% et réduisez-la de la largeur de son conteneur.

Avantages: Ne nécessite pratiquement aucun effort pour être mis en œuvre, compatible avec tous les navigateurs et pris en charge par les anciens navigateurs.

Inconvénients: télécharge souvent plus de données que nécessaire et utilise ensuite des cycles de traitement du client pour le réduire (lent). Vous pouvez vous retrouver avec des images de très mauvaise qualité en fonction de l'algorithme de mise à l'échelle du navigateur. Aucune possibilité de direction artistique et impossible d'adapter l'image aux écrans de type rétine.

  1. Utilisez les requêtes multimédias pour lire les propriétés du client et récupérez l’une des images personnalisées correspondant aux différents points de rupture de votre conception. (Les balises HTML Responsive Images Extension et les attributs srcset proposés travaillent pour intégrer cette approche dans la spécification HTML).

Avantages: Téléchargement plus rapide sur les appareils mobiles. Peut gérer les affichages de type rétine. Amélioration de la qualité de l’image, car les images ont été traitées avec une méthode de haute qualité. La direction artistique devient possible.

Inconvénients: Quelqu'un doit passer du temps à traiter, recadrer et gérer plusieurs versions d'une même image. Plus de codage: vous devez maintenant épeler chaque version de l’image de façon quelconque et créer des requêtes multimédia pour toutes les mises en page souhaitées. Répétez ce qui précède pour chaque image que vous servez. Ne fonctionnera que pour les navigateurs prenant en charge les requêtes de média CSS3 ou les nouvelles balises.

  1. Créez le backend Optimisez les images pour n'importe quel écran ou disposition en utilisant une seule image source à la volée. À mon avis, cela revient à traiter les images réactives comme une tâche de négociation de contenu, un peu comme HTTP.

Avantages: Designer n'a pas à perdre du temps à traiter des images et à gérer plusieurs versions. L'image de taille optimale est envoyée à chaque fois. Peut gérer les affichages de type rétine et s’ajuster de manière dynamique à la direction artistique (même si, avec quelques efforts supplémentaires, il faut savoir où se concentrer). Aucun balisage spécial ou supplémentaire requis (mise en garde ci-dessous). Compatible avec tous les navigateurs et fonctionnera pour les anciens navigateurs.

Inconvénients: doivent capturer et transmettre des informations sur le navigateur du client et les propriétés de l’écran. Le chargement initial d'une image peut être plus lent que dans toute autre approche, car l'image doit être traitée (elle est généralement mise en cache pour les demandes ultérieures).

0
learnweb