Comment modifier un fichier média (image, PDF, etc.) sur mon site web traduit ?

Cet article vous guide tout au long du processus de modification de différents types de médias - notamment les images, les PDF, les fichiers DOCX, les archives RAR et les vidéos YouTube - sur les versions traduites de votre site web.

Introduction

Lorsque vous avez un site web multilingue, vous pouvez avoir besoin d'afficher différents fichiers multimédias tels que des images, des PDF ou des vidéos dans différentes versions linguistiques. Ce guide vous guidera à travers le processus de modification des fichiers multimédias dans votre site Web traduit à l'aide de Weglot.

1. Conditions préalables
2. Ajout d'une traduction de média
3. Traduction d'images
   1. Chargement standard
   2. Lazy loading
   3. Arrière-plan CSS
4. Dépannage

1. Les conditions préalables

Avant de commencer, assurez-vous d'avoir effectué les opérations suivantes :

a. Téléchargez le fichier multimédia traduit dans le panneau d'administration de votre site web et récupérez son URL.

b. Récupérez l'URL du fichier multimédia original sur votre site web.

2. Ajout d'une traduction des médias

a. Naviguez vers Weglot Dashboard: Ouvrez votre Weglot dashboard et allez dans Traductions > Langues.

b. Choisissez la langue: Sélectionnez la langue pour laquelle vous souhaitez ajouter la traduction des médias.

c. Ajouter une traduction pour les médias: Cliquez sur le bouton "Actions" à côté de la barre de recherche et choisissez "Ajouter une traduction média".

d. Complétez les détails: Une fenêtre contextuelle s'affiche, dans laquelle vous devez saisir des informations :

• L'URL du média original
• L'URL du média traduit

e. Finaliser: Cliquez sur le bouton "Ajouter" pour terminer le processus.

C'est fait ! Vous devriez maintenant voir la traduction des médias directement dans votre liste de traductions. Vos médias traduits devraient être affichés sur la version traduite de votre site web.

3. Traduction de l'image

Les images peuvent être chargées de différentes manières sur votre site web. Nous allons voir trois façons dont les images peuvent être chargées, afin que vous puissiez les traduire à l'aide de Weglot.

a. Chargement standard

Les images sont généralement chargées par l'intermédiaire de la fonction src dans le code HTML. Cliquez avec le bouton droit de la souris sur l'image et sélectionnez "Inspecter" pour trouver l'URL.

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

Cette méthode charge différentes images en fonction de la taille de la fenêtre du navigateur. Elle permet à votre site web d'afficher des images plus compactes sur des appareils plus petits comme les téléphones portables, ce qui garantit un chargement rapide et constant de votre site.

Si l'image que vous essayez de traduire est téléchargée paresseusement, copiez toutes les URL dans le fichier data-src ou srcset .

c. Arrière-plan CSS

Si une image est définie comme arrière-plan, vous devrez ajouter un CSS personnalisé dans votre Weglot Dashboard sous Paramètres > Sélecteur de langue > CSS personnalisé(voir: Comment ajouter un CSS personnalisé).

Voici un exemple de scénario illustrant comment modifier l'image de fond d'un élément sur la version traduite de votre site web :

html[lang="fr"] .my-element-class {
    background : url("https://mywebsite.com/path/to/my/translated-image.png") !important ;
}

Vous devrez échanger le code de la langue (dans cet exemple, c'est "fr" ; pour une liste complète, consultez la rubrique Langues disponibles), le sélecteur CSS de l'élément dont vous souhaitez modifier l'arrière-plan et l'URL de la nouvelle image que vous souhaitez utiliser à la place de l'image d'origine.

Dépannage

• Actualisez votre site web ou videz le cache de votre navigateur si les changements ne sont pas visibles.
• Veillez à ce qu'il n'y ait pas de requêtes inutiles dans l'URL du média, comme par exemple ?v=randomNumbers à la fin de l'URL.
• Vérifiez que l'URL est correcte et qu'elle existe dans le code source de votre site web. Pour examiner le code source de votre site web, vous pouvez soit faire un clic droit sur n'importe quelle partie de la page web et choisir "Voir la source de la page", soit utiliser le raccourci clavier-Ctrl+Alt+U pour PC ou Cmd+Opt+U pour Mac.

Besoin d'aide ?

Si vous rencontrez des problèmes, n'hésitez pas à contacter le support de Weglot avec les détails nécessaires :

• l'URL où se trouve le média que vous souhaitez traduire.
• l'URL du média original.
• l'URL du média que vous souhaitez traduire.