Les écrans des appareils étant de plus en plus petits, il est plus important que jamais d’offrir à vos visiteurs la possibilité d’agrandir facilement les images. Une loupe d’image vous permet de “zoomer” sur des zones spécifiques d’une image. Le reste de l’image reste à la taille originale, seule la zone d’intérêt étant agrandie.

Nous disposons de la technologie nécessaire pour agrandir les images depuis des années, mais la mise en œuvre de cet effet a été compliquée et longue. Si vous avez cherché un plugin WordPress de zoom d’image pour vous faciliter la tâche, vous avez de la chance. Nous allons utiliser le plugin Image Hover Effects Ultimate pour obtenir l’effet en quelques minutes.

Pas de code, pas d’embrouilles, pas d’agitation ! Allons droit au but.

Installation du plugin ultime pour les effets de survol d’images

Connectez-vous à votre panneau d’administration WordPress.

Dans la navigation de la colonne de gauche, passez la souris sur le lien “Plugins” et cliquez sur le lien “Add New”.

Dans la case “Recherche de plugins…”, entrez “Image Hover Effects Ultimate”.

Une fois que vous avez trouvé le plugin, cliquez sur le bouton “Installer maintenant”.

Enfin, cliquez sur le bouton “Activer”.

Agrandir les images à l’aide des effets de survol Ultimate

La façon dont le plugin fonctionne, vous créez une loupe d’image “Style”. Le Style contrôle le fonctionnement de l’agrandissement de l’image ainsi que d’autres options de configuration. Vous pouvez ajouter plusieurs images à un Style. Toutes les images d’un style donné sont affichées ensemble dans une colonne sur la page ou l’article.

La mise en place d’un style pour agrandir les images se fait en huit étapes, c’est pourquoi cette section est un peu longue. J’ai numéroté les étapes pour que vous puissiez prendre votre temps et suivre le processus.

En relation  Comment recadrer les vignettes des articles dans WordPress

1. Accéder à l’image survolée

Dans la navigation de la colonne de gauche, passez la souris sur le lien “survol de l’image” et cliquez sur le lien “survol de l’image”.

2. Utilisez la loupe d’image

Cliquez sur la tuile “Image Magnifier”.

Vous verrez les trois options pour agrandir les images. L’une affiche l’image agrandie à droite, l’autre l’affiche à gauche, et l’autre affiche la partie agrandie de l’image par-dessus l’image originale.

Survolez les images de démonstration pour choisir l’option que vous souhaitez utiliser.

3. Créer le nouveau style

Cliquez sur le bouton “Créer un style”.

Un popup “New Image Hover” s’ouvrira.

4. Nom et enregistrement du style

Donnez un nom au style dans le champ “Nom”.

Choisissez le style de grossissement que vous souhaitez parmi les boutons “Mise en page”. (1er grossissement à droite, 2ème grossissement sur l’image, 3ème grossissement à gauche).

Cliquez sur le bouton “Enregistrer”.

Une page de configuration s’ouvrira.

5. Ouvrir un formulaire

Cliquez sur la tuile “Ouvrir le formulaire de la loupe”.

Une fenêtre contextuelle “Formulaire de survol d’image” s’ouvrira.

6. Ouvrir la bibliothèque d’images

Dans la section “Type de média”, vous avez la possibilité de choisir une image de votre médiathèque ou une URL. Pour cette démonstration, nous allons sélectionner une image existante de la Médiathèque.

Dans la section “Image”, passez la souris sur le titre et cliquez sur le lien “Choisir une image”.

7. Choisissez votre image

Votre médiathèque sera ouverte. Cliquez sur l’image que vous souhaitez agrandir et cliquez sur le bouton “Choisir une image”.

8. Régler et soumettre

Nous sommes maintenant de retour au popup “Formulaire de survol d’image”. Vous devriez voir l’image que vous avez sélectionnée dans votre médiathèque dans le volet de prévisualisation.

Je veux que la loupe soit placée au-dessus de l’image, donc je vais régler la “Position de la loupe” sur “Aucune”. (Je ne sais pas pourquoi le réglage est “Aucun” et non “Haut”, mais c’est le cas).

Nous laisserons le réglage de la “bonne position” tranquille. Cela affecte l’endroit où l’image agrandie apparaît lorsque le grossissement est réglé sur un côté. Comme nous n’allons pas agrandir les images sur le côté, cela devrait rester à “0”.

Cliquez sur le bouton “Soumettre”.

Ajout de l’image agrandie à une page ou un article

Bon, nous avons créé un style et ajouté une image. Maintenant, insérons l’image dans une page ou un article.

En relation  Comment charger les commentaires avec la pagination dans WordPress

Nous sommes toujours sur la page d’édition du style, et sous la tuile où nous avons ajouté l’image, il y a une section “Shortcode”. Dans notre exemple, le code court est [iheu_ultimate_oxi id=”1″].

Copiez le shortcode.

Ouvrez une page ou un message et insérez un bloc de raccourcis.

Collez le raccourci de la loupe dans le bloc. Si vous utilisez l’éditeur WordPress classique, il suffit de coller le raccourci dans la page comme vous le feriez pour n’importe quel texte.

Cliquez sur le bouton “Mise à jour” pour enregistrer la page.

Maintenant, lorsque vous visualisez la page, votre image s’affiche à l’endroit où le shortcode a été inséré. Passez la souris sur l’image pour voir l’effet d’agrandissement.

Je ne peux pas vraiment démontrer l’effet d’agrandissement sur une image statique, mais ça marche. ?

Agrandir plusieurs images en ajoutant une autre image au style

Dans la navigation de la colonne de gauche, passez la souris sur le lien “survol de l’image” et cliquez sur le lien “code court”.

Cette page contient une liste de vos Styles.

Dans la colonne “Nom”, vous pouvez voir le nom que j’ai donné au Style lorsque nous l’avons mis en place, “ImageMag”. Le shortcode peut également être copié à partir de cette page. Il y a aussi du code PHP pour permettre aux utilisateurs avancés d’insérer des styles dans les modèles.

Cliquez sur le bouton “Modifier”.

Nous sommes maintenant de retour à la page d’édition familière.

Pour ajouter une deuxième image, survolez l’icône du signe plus (+) dans la section “Ajouter une nouvelle loupe”. Répétez les étapes 5 à 8 ci-dessus pour ajouter une image.

Lorsque la deuxième image est ajoutée, faites défiler l’écran jusqu’à la section “Aperçu”. Vous verrez la deuxième image en dessous de la première image que nous avons ajoutée lors de la création du style.

Ensuite, si vous allez à la page où nous avons ajouté le shortcode, vous verrez les deux images.

Le plugin fait plus que magnifier les images dans WordPress

Comme vous l’avez peut-être remarqué dans la section “Effets d’image” du plugin, il fait plus que simplement zoomer ou agrandir.

Il existe une tonne d’outils de survol d’images, dont la plupart comportent des légendes. Il y a des animations de boutons, et ma préférée, la fonction “Comparaison d’images”. Faites-vous une faveur et regardez ce que le plugin peut faire d’autre.

En relation  Comment configurer WordPress pour qu'il affiche les photos en colonnes et en rangées.

Que se passe-t-il si vous désinstallez le plugin ultime Image Hover Effects

Si vous désinstallez le plugin, les pages et les messages qui l’ont utilisé seront affectés.

  • Les Styles que vous avez créés seront supprimés.
  • Les shortcodes du plugin ne fonctionneront plus, de sorte que les shortcodes eux-mêmes seront affichés partout où ils ont été utilisés.

Compatibilité des thèmes

Je dois vous dire que j’ai rencontré des problèmes de compatibilité de thème avec ce plugin. Ce qui est étrange étant donné qu’il a été mis à jour il y a un mois.

Pour chaque tutoriel que je fais, je commence par une nouvelle installation de la version la plus récente de WordPress. Cela inclut le dernier thème par défaut de WordPress (qui dans ce cas était Twenty Twenty).

L’effet de grossissement n’a pas fonctionné dans Twenty Twenty. Ou le thème par défaut précédent, Twenty Nineteen. J’ai dû revenir au thème Twenty Seventeen pour le faire fonctionner (il n’y avait pas de thème Twenty Eighteen).

Cela ne veut pas dire qu’il ne fonctionnera pas dans votre thème.

Mais lorsque je teste des plugins, je me limite aux thèmes qui accompagnent l’installation de WordPress. Je vous fais donc savoir comment il s’est comporté dans ces thèmes.

On dit que les yeux sont les fenêtres de l’âme

Je ne sais pas si c’est vrai, mais je sais que nous sommes des créatures visuelles. Nous utilisons des images sur le web depuis la première version du navigateur Mosaic (demandez à vos grands-parents).

Tout ce que nous pouvons faire pour améliorer la présentation des images nous aide à retenir les visiteurs. Ainsi, comme beaucoup de vos visiteurs passent à des écrans plus petits, leur permettre de voir plus facilement les détails des images est un plus. La loupe d’image dont nous avons parlé ici aujourd’hui fait cela et bien plus encore.

Avez-vous utilisé d’anciennes versions manuelles d’agrandisseurs d’images sur votre site web ? Pensez-vous qu’un plugin WordPress comme celui-ci vous encouragerait à utiliser plus souvent l’agrandissement d’images ? Faites-le moi savoir dans les commentaires.