Comment agrandir une image dans WordPress (Lightboxes!) • WPShout

Que vous écriviez sur des sujets techniques ou quelque chose d'encore plus exigeant visuellement comme l'art, vous voulez parfois simplement agrandir l'image dans WordPress. Cela peut signifier un certain nombre de choses, de la façon dont il apparaît sur la page à ce qui se passe lorsque vous cliquez dessus. Nous aborderons brièvement le premier cas, puis passerons la plupart de notre temps à introduire l'utilisation d'une "lightbox" du plugin Simple Lightbox pour faire apparaître nos images sur notre contenu dans une grande taille lorsque vous cliquez dessus.

Résumé rapide des autres moyens d'agrandir une image

Dans WordPress, les images sont «rognées automatiquement» lors du téléchargement. Je veux dire par là que lorsque vous téléchargez une image sur WordPress, soit 2000 pixels par 1500 pixels, WordPress créera également plusieurs petites «miniatures». Les tailles typiques pour ceux-ci sont 150 × 150, 300 × 300 et 1024 × 1024. Mais différents sites WordPress peuvent avoir personnalisé cette configuration (dans «Paramètres> Médias» dans la zone d'administration de WordPress). D'autres plugins et thèmes peuvent également signifier que votre site WordPress peut également avoir (beaucoup) plus de tailles au-delà de cela.

Quoi qu'il en soit, si vous ne faites que regarder le message et que vous souhaitez qu'il contienne une image plus grande, vous trouverez peut-être aussi simple de «redimensionner» cette image que de sélectionner une autre de ces tailles. C'est le premier conseil rapide pour agrandir une image dans WordPress »

• Modifiez la taille de l'image que vous intégrez dans une publication. Lorsque vous ajoutez une image à un article dans WordPress, vous sélectionnez une taille. Si vous voulez que l'image paraisse grande, donnez-lui sa propre ligne (comme je l'ai fait avec celle ci-dessous) et choisissez la "Taille d'image" "Grande" ou "Pleine taille" pour l'image.

• Téléchargez des images plus grandes. Si vous ne pouvez pas sélectionner une image suffisamment grande, assurons-nous que nous avons un gros fichier dans WordPress. Si vous essayez de montrer aux visiteurs une image plus grande dans WordPress que WordPress, vous échouerez. Vous devez télécharger une image plus grande sur WordPress si la version "Full Size" n'est pas assez grande. "Full Size" est le libellé WordPress de la taille d'image que vous avez téléchargée, donc certaines personnes qui recadrent des images avant de télécharger leur contenu sur WordPress peuvent trouver que c'est le problème. Si vous téléchargez une petite image de 300 x 300 pixels sur WordPress, il n'y a pas de magie (encore conçue) qui vous permettra de voir cela suffisamment grand pour que cela ait l'air net sur leur grand écran de bureau.

Vidéo montrant l'agrandissement d'une image lors d'un clic

Je couvre un peu les astuces ci-dessus dans la vidéo, ainsi qu'un super petit plugin "lightbox". Mais si vous n'êtes pas d'humeur vidéo, n'hésitez pas à continuer de faire défiler jusqu'au texte expliquant comment afficher des images plus grandes avec un plugin WordPress lightbox.

Comment utiliser un plugin Lightbox pour des images WordPress plus grandes

1. Dans le message, assurez-vous de «créer un lien» vers l'image en taille réelle.

J'utilise l'éditeur "Gutenberg" ou "Block" de WordPress. Les personnes qui ont l'éditeur «Classic» ou «TinyMCE» auront une interface différente. Si vous êtes confus et que votre site Web WordPress a été créé l'année dernière, vous êtes probablement sur l'éditeur de blocs.

Assez de préambule, voici comment vous allez permettre à un visiteur de votre site de cliquer sur une image dans un message pour l'afficher dans une plus grande taille.

Pour lier le fichier multimédia, vous devez cliquez sur l'image pour que le «volet de boutons» flottant apparaisse au-dessus l'image. (Vous pouvez voir un exemple à droite.) À l'intérieur de ce volet flottant, vous voudrez cliquez sur le bouton "lien", qui ressemble un peu à quelques "maillons de chaîne" (c'est devenu plus impressionniste dans les itérations plus récentes de l'éditeur de blocs). C’est le bleu dans l’image de droite. Ensuite, ils ont créé ce que nous voulons – un lien direct vers le "fichier multimédia" – facile, il suffit donc de sélectionner "Fichier multimédia" comme première valeur dans la "liste déroulante".

(Nous n'exécutons pas le plug-in lightbox ici sur WPShout, donc l'image à droite lorsque vous cliquez dessus amènera votre navigateur Web vers une nouvelle «page» qui n'est que le fichier multimédia. C'est ce qui se produit si vous vous arrêtez ici. Si vous * comme * cette interface, pas besoin de continuer 😊)

2. Installez le plugin «Simple Lightbox»

Vous souhaitez probablement agrandir une image dans WordPress lorsqu'un visiteur clique dessus, mais vous souhaitez qu'il reste sur la page en cours. Pour ce faire, nous souhaitons activer ce que l'on appelle une "boîte à lumière" pour nos images. C'est un terme courant, et heureusement, de nombreux plugins WordPress le feront pour nous.

Pour le faire fonctionner, il vous suffit de rechercher et d'installer le plug-in "Simple Lightbox". Si vous n'êtes pas familier, voici un bref résumé des clics:

1. Dans l'interface d'administration de WordPress, accédez à "Plugins> Ajouter nouveau."
2. En haut à droite, saisissez "lightbox simple" dans la zone de recherche.
3. Le plugin que j'ai utilisé devrait être en haut à gauche de vos résultats. C'est le plugin simple appelé "Simple Lightbox" par "Archetyped". Lorsque vous trouvez le bon plugin, cliquez sur le bouton «Installer».
4. Une fois le plugin installé, vous pouvez activer le plugin en cliquant à l'endroit où se trouvait le bouton Installer, sur le nouveau bouton «Activer».

Par défaut, Simple Lightbox ouvre tous les fichiers multimédias liés (comme nous l'avons fait à l'étape 1 ci-dessus) en tant que lightbox. Cette lightbox est une "fenêtre contextuelle sur la page". C'est un excellent moyen de montrer vraiment toutes les images dont vous êtes fier (photos de téléphone, numérisations d'art de haute qualité, captures d'écran) tout ce que vous voulez agrandir pour vos visiteurs curieux.

Bonne chance, et n'hésitez pas à poser des questions dans les commentaires 🙂