Comment modifier un fichier Media (Image, PDF ...) dans ma version traduite
Dans cet article, vous trouverez comment modifier n'importe quel média (image, .pdf, .docx, .rar et vidéo Youtube) sur votre site Web traduit.
Vous pouvez avoir besoin d'afficher une forme différente de média (comme une image incluant du texte) dans la version traduite de votre site web. Avec Weglot, vous pouvez le faire en ajoutant l'URL du média traduit dans vos traductions. La traduction de fichiers média tels que les PDF est assez simple. En revanche, les images peuvent être chargées de différentes manières pour assurer un chargement rapide de votre site Web, et Weglot aura besoin de plus d'informations pour les traduire.
1) Conditions préalables
Pour traduire un média avec Weglot, vous devez :
- Téléchargez le média traduit dans l'administration de votre site Web et récupérez son URL.
- Dans la version originale de votre site web, récupérez l'URL du média que vous souhaitez "traduire".
2) Ajout d'une traduction de média
1. Allez dans votre Weglot dashboard >Translations List.
2. Sélectionnez la langue pour laquelle vous souhaitez ajouter la traduction.
3. En haut de la page, à côté de la barre de recherche, cliquez sur le bouton "Actions" et choisissez le bouton "Add a media translation" :
4. Une fenêtre pop-up apparaît dans laquelle vous devez ajouter les éléments suivants :
- L'URL du média sur la page d'origine
- L'URL du média sur la page traduite
Cliquez sur le bouton "Add".
C'est fait ! Vous devriez maintenant voir la traduction des médias directement dans votre Liste des traductionset les médias "traduits" doivent être affichés sur la version traduite de votre site web.
3) Traduction d'images
Les images peuvent être chargées de différentes manières sur votre site web. Nous allons couvrir trois façons de charger les images pour que vous puissiez les traduire en utilisant Weglot.
a) Chargement standard
La manière la plus courante de charger une image est via la fonction src dans le img dans le code source de votre site web.
Pour trouver l'URL de l'image originale, visitez la page où elle se trouve, puis faites un clic droit sur l'image et sélectionnez "Inspecter" :
Vous devriez voir l'URL de l'image près de l'attribut src , copiez-le :
b) Lazy loading
Le lazy loading consiste à charger une image différente en fonction de la taille de la fenêtre du navigateur. Elle permet à votre site web d'afficher une image plus petite sur les petits appareils, comme les téléphones mobiles. Ainsi, votre site web se charge toujours rapidement.
Si l'image que vous essayez de traduire est chargée à l'aide de lazy loading, copiez toutes les URL contenues dans les attributs data-src ou srcset .
c) Arrière-plan CSS
Tout bloc sur votre site web peut avoir une image comme arrière-plan. Si une image est chargée comme arrière-plan d'un élément, vous devrez ajouter une règle CSS personnalisée à votre Weglot Dashboard > Settings > Language Switcher > Custom CSS, en ciblant l'élément en question (voir Comment ajouter un CSS personnalisé).
Voici un exemple de modification de l'image d'arrière-plan (background) d'un élément dans la version française de votre site web :
html[lang="fr"] .my-element-class {
background: url("https://mywebsite.com/path/to/my/translated-image.png") !important;
}
Vous devrez remplacer le code de la langue (ici "fr", voir Langues disponibles pour plus d'informations), le sélecteur CSS de l'élément dont vous souhaitez modifier l'arrière-plan et l'URL de l'image avec laquelle vous souhaitez remplacer l'image originale.
Dépannage
Si la traduction des médias ne fonctionne pas, assurez-vous de suivre les étapes suivantes :
N'hésitez pas à Hard-Refresh ( Mac: cmd-shift-R / PC: ctrl-F5) la page de votre site web et vérifiez à nouveau dans une fenêtre incognito si vous ne remarquez pas les changements.
Assurez-vous qu'il n'y a pas d'informations inutiles dans l'URL de votre média, comme des requêtes telles que ?v=randomNumbers à la fin de l'URL.
Assurez-vous que l'URL ajoutée est la bonne et qu'elle est présente dans le code source de votre site web.
Vous pouvez vérifier le code source de votre site web en faisant un clic droit n'importe où sur la page et en sélectionnant "Voir la source de la page" ou en utilisant le raccourci ( PC: ctrl-alt-U / Mac: cmd-opt-U).
Si la traduction de votre média ne semble toujours pas fonctionner, vous pouvez nous contacter avec les informations suivantes :
- l'URL où se trouve l'élément que vous souhaitez traduire
- l'URL du média original
- l'URL du média vers lequel vous souhaitez effectuer la traduction