WordPress est une plateforme très puissante.Est assez facile de faire un thème responsive et son intégration une fois que vous connaissez les bases de thématisation. Images réactives, d’autre part, ne sont pas quelque chose de traite WordPress avec hors de la boîte. Vous pouvez aller dans la voie de générer manuellement chaque taille de l’ image, puis dans l’éditeur HTML que vous pouvez taper manuellement la balise image, srcsetattributs et chaque image. Cela permettra non seulement du temps, mais pourrait être un problème pour tous les utilisateurs d’administration qui ne sont pas HTML alphabétisés.

Heureusement , il y a un moyen de faire WordPress faire tout le levage lourd. Il peut générer toutes les tailles d’image à partir d’ une seule image télécharger puis, via un plugin, mettre en œuvre la balise image et  srcset attribue partout l’auteur choisit d’insérer une image.

ÉTAPE 1: MODIFIER FUNCTIONS.PHP POUR GÉNÉRER PLUS DE TAILLES D’IMAGE

Chaque fois que vous téléchargez une image WordPress sauve à sa taille d’origine. Il génère également automatiquement 3 copies redimensionnées dans ces tailles standard (soit la hauteur ou la largeur peuvent changer en fonction de rapport d’image):

  1. Miniature (150 × 150)
  2. Moyen (300 × 300)
  3. Large (1024 × 1024)

Ceci est une caractéristique très puissant car il peut être personnalisé pour faire une taille d’image. Cela signifie que vous n’avez pas besoin de faire de multiples copies d’une image en différentes tailles. Vous venez de télécharger une seule image, et WordPress crée les copies redimensionnées.

Cela se fait en modifiant le fichier functions.php. Pour ajouter de nouvelles tailles d’image, vous devez ajouter des appels à la add_image_size fonction. Voici un exemple qui ajoute quatre nouvelles tailles d’image:

add_image_size( 'sml_size', 300 ); 
add_image_size( 'mid_size', 600 ); 
add_image_size( 'lrg_size', 1200 ); 
add_image_size( 'sup_size', 2400 );

Chaque appel à la fonction comprend un nom (pour WordPress peut identifier la taille) et une largeur. Les nouvelles dimensions seront de 300, 600, 1200 et 2400 pixels delarge. Il est possible avec le add_image_size fonction pour WordPress mis également àla hauteur ou recadrer l’image, mais l’exemple ci – dessus va maintenir le ratio image originale d’aspect. (Plus peut être trouvé au sujet de la add_image_size fonction dans le WordPress Codex .)

L’exemple ci-dessus montre seulement quatre nouvelles tailles d’image ajoutées, mais vous voudrez peut-être ajouter plus ou moins … ce sera basé sur la conception de votre thème. Maintenant, chaque fois qu’une image est télécharger sur WordPress, il va générer les nouvelles tailles d’image. L’étape suivante consiste à les inclure dans le code HTML.

ÉTAPE 2: INSTALLER LES IMAGES RESPONSIVE RICG LE PLUGIN

Pour WordPress sortie toutes les tailles d’image, un nouveau plugin doit être installé: les images Responsive RICG plugin. Une fois qu’il est installé et activé toutes les tailles d’ images seront incluses dans la balise image via l’attribut srcset.

Généralement quand une image est ajouté à une page dans WordPress la sortie HTML ressemble à ceci:

<img class="aligncenter wp-image–176 size-full" src="http://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg" alt="App Screenshot">

Il y a une seule image dans l’attribut src.

Une fois le plug-in est installé le HTML ressemblera à ceci:

<img class="aligncenter wp-image–137 size-full" src="http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg" srcset="http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–169x300.jpg 169w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–576x1024.jpg 576w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–300x534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600x1067.jpg 600w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg 600w" alt="onavo" width="600" height="1067" sizes="(max-width: 600px) 100vw, 600px">

Toutes les nouvelles tailles d’image ont été ajoutées via le srcset attribut.

Le plugin comprend également Picturefill.js , une image polyfill responsive qui ajoute lesupport tant pour l’élément d’image et les nouveaux attributs responsive pour l’élément img. Ceci, combiné avec le srcset attributs désormais inclus dans la balise image est ce qui rend vos images responsive.

VOS IMAGES SONT MAINTENANT RESPONSIVE

Maintenant, les images sur votre site Web seront responsive- le navigateur choisira l’image la plus appropriée à télécharger.

Les utilisateurs sur les appareils dotés d’écrans plus petits auront les images plus petites. Votre site se charge plus rapidement que ces images sont téléchargées plus rapidement, ils auront besoin de moins de la bande passante des utilisateurs. Les utilisateurs sur les appareils avec des écrans plus grands auront les plus grandes images. Ils ne vont pas apparaître pixélisé ou d’une qualité moindre.

Il n’y a qu’un problème potentiel avec cette méthode: il fonctionne uniquement avec des images téléchargées sur WordPress après Images Responsive RICG plugin a été installé. Si elle est un tout nouveau site Web sur lequel vous travaillez alors cela peut ne pas être un problème, mais si elle est un site existant avec le contenu existant de la nouvelle image des tailles qui vous avez ajoutés à functions.php n’ont été générés.Heureusement, vous ne devez pas ajouter de nouveau toutes les images – il y a un plugin qui peut vous aider.

ÉTAPE 3: INSTALLATION PLUG-IN DE RE-GÉNÉRER DES TAILLES D’IMAGE (EN OPTION)

Le plugin Regenerate Thumbnails passer par toutes les pièces jointes d’image existants et re-générer les nouvelles tailles d’image sur la base des nouvelles créées dans functions.php – il est un véritable gain de temps et nécessite seulement le clic d’un seul bouton.

Une fois installé, allez dans Outils -> Regen. Miniatures puis cliquez sur le bouton « Régénérer toutes les vignettes ». Une barre d’état apparaît et vous verrez les informations sur le nombre d’ images ont été redimensionnées.

Maintenant, toutes les images existantes dans votre site Web seront émis correctement en utilisant la balise d’image via le srcset attribut.

Photo descriptive utilise l’ image de l’ appareil et l’ image de l’ appareil mobile  via Shutterstock.