Bloc Image Compare

Affichez et comparez les différences entre deux images à l’aide du curseur du bloc Image Compare.

Ajouter le bloc Image Compare

Le bloc Image Compare est disponible sur tous les sites connectés à Jetpack. Il fait partie de la suite de blocs Jetpack et est activé par défaut. L’utilisation du bloc Image Compare ne nécessite pas de mise à niveau payante. Consultez notre article sur les blocs Jetpack pour découvrir les blocs disponibles et savoir comment les activer.

Jetpack Blocks require the Block Editor (also referred to as the Gutenberg editor). If you’ve installed the Classic Editor plugin, you have a few options:

  • Deactivate the Classic Editor: Go to Plugins → Installed Plugins in your WP Admin and deactivate the Classic Editor plugin.
  • Enable both editors: If you prefer flexibility, navigate to Settings → Writing in your WP Admin (not the menu under Jetpack settings). Set Allow users to switch editors to Yes. You will only see these options if you have the Classic Editor plugin installed and active.

Some custom themes or plugins may prevent you from using the Block Editor. In that case, please contact the support team for the plugin or theme for further assistance.

For more details, see Using Blocks and the Classic Editor.

Vous pouvez ajouter le bloc Comparaison d’images en le recherchant et/ou en le sélectionnant dans la section Jetpack du sélecteur de blocs. Consultez les blocs Jetpack pour obtenir des instructions détaillées sur l’ajout de blocs.

Suivez ces étapes pour ajouter des images au bloc Image Compare :

  1. Le bloc fonctionne mieux avec deux images de même largeur et de même hauteur ; essayez donc de trouver des dimensions similaires.
  2. Après avoir ajouté le bloc, vous pouvez ajouter des images à votre galerie comme dans un bloc d’image classique.
  3. Vous pouvez importer des images depuis votre ordinateur, les sélectionner dans votre médiathèque ou les ajouter depuis une source externe.
  4. Une fois les images ajoutées, vous pouvez utiliser la barre d’outils du bloc et la barre latérale pour effectuer vos personnalisations.
  5. Si nécessaire, ajoutez une légende au bloc après avoir importé vos images.

Veuillez noter que si vous importez accidentellement les mauvaises images ou souhaitez modifier leur ordre, vous devrez supprimer le bloc et recommencer.

Réglages du bloc

Chaque bloc possède des options spécifiques dans la barre latérale de l’éditeur, ainsi que des options accessibles depuis la barre d’outils du bloc. Si la barre latérale n’est pas visible, cliquez sur l’icône Réglages (qui ressemble à un menu) à côté du bouton Publier.

Le bloc Image Compare ne propose que quelques options de configuration, dont la plus importante est l’orientation du curseur des images.

Réglages de l’orientation

Grâce aux réglages de l’orientation, vous pouvez disposer les images côte à côte ou l’une au-dessus de l’autre. Cela modifiera également la façon dont le curseur se déplace entre les images.

Vous pouvez modifier l’orientation autant de fois que vous le souhaitez, mais veillez à enregistrer les modifications avant de tester la nouvelle orientation.

Avancé

Ajoutez une classe CSS à votre bloc, écrivez du CSS personnalisé et personnalisez le style du bloc comme bon vous semble.

Problèmes connus

Le bloc Image Compare utilise, pour Jetpack, son accélérateur de site pour diffuser et optimiser les images afin d’améliorer les performances. L’utilisation de plusieurs services d’optimisation ou de mise en cache avec l’accélérateur de site peut parfois entraîner des conflits, notamment dans la façon dont les images sont affichées par le bloc.

Les problèmes courants incluent des images manquantes ou un curseur qui ne fonctionne pas. Ils sont souvent dus à des extensions qui modifient les URL des images, convertissent automatiquement les formats d’image, ou appliquent le chargement différé et la réécriture par CDN d’une manière susceptible d’interférer avec Jetpack.

Si vous constatez des problèmes d’affichage persistants avec le bloc Image Compare :

  1. Essayez de désactiver temporairement toute extension d’optimisation des images (par exemple, EWWW Image Optimizer) afin de tester sa compatibilité.
  2. Si le bloc fonctionne après la désactivation, vérifiez les réglages de cette extension lorsque vous la réactivez. Essayez de désactiver des fonctionnalités telles que le chargement différé ou la gestion de CDN.
  3. Testez le bloc.

Par mesure de précaution, évitez d’activer plusieurs couches d’optimisation ou de mise en cache qui chevauchent l’accélérateur de site de Jetpack.

Still need help?

Please contact support. We’re happy to advise.

Informations sur la confidentialité

Le bloc Image Feature est activé par défaut. Il ne peut pas être désactivé. Le bloc Image Compare est toujours disponible dans le sélecteur de blocs.

Données utilisées
Propriétaires / utilisateurs du site

Aucune.

Visiteurs du site

Aucune.

Activité suivie
Propriétaires / utilisateurs du site

En cas de déconnexion de Google Photos, nous suivons le fait que Google Photos est en cours de déconnexion.

Visiteurs du site

Aucune.

Données synchronisées (En savoir plus)
Propriétaires / utilisateurs du site

Nous synchronisons les options qui indiquent si la fonctionnalité est activée ou non, ainsi que la manière dont ses réglages disponibles sont configurés.

Visiteurs du site

Aucune.