How to change a Media file (Image, PDF, etc) on my translated website

This article guides you through the process of modifying various types of media—including images, PDFs, DOCX files, RAR archives, and YouTube videos—on your website's translated versions.

Introduction

When you have a multilingual website, you may need to display different media files like images, PDFs, or videos in various language versions. This guide will walk you through the process of changing media files in your translated website using Weglot.

1. Prerequisites
2. Adding a media translation
3. Image translation
   1. Standard loading
   2. Lazy loading
   3. CSS background
4. Troubleshooting

1. Prerequisites

Before you start, make sure you have done the following:

a. Uploaded the translated media file to your website's admin panel and retrieved its URL.

b. Retrieved the URL of the original media file from your website.

2. Adding a media translation

a. Navigate to Weglot Dashboard: Open your Weglot dashboard and go to Translations > Languages.

b. Choose the Language: Select the language for which you want to add the media translation.

c. Add Media Translation: Click on the "Actions" button next to the search bar and choose "Add media translation".

d. Fill in the Details: A pop-up will appear where you'll need to enter:

• The URL of the original media
• The URL of the translated media

e. Finalize: Click on the "Add" button to complete the process.

It's done! You should now see the media translation directly in your Translation List. Your translated media should be displayed on the translated version of your website.

3. Image translation

Images can be loaded in various ways on your website. We'll cover three ways images can be loaded, so you can translate them using Weglot.

a. Standard loading

Images are usually loaded via the src attribute in the HTML code. Right-click on the image and select "Inspect" to find the URL.

To find the URL of the original image, visit the page where it's located, then right-click on the image and select "Inspect":

You should see the URL of the image near the src attribute, copy it :

b. Lazy loading

This method loads different images based on the browser window size. This allows your website to show more compact images on smaller devices like mobile phones, ensuring that your site consistently loads quickly.

If the image you're trying to translate is lazy-loaded, copy all URLs in the data-src or srcset attributes.

c. CSS background

If an image is set as a background, you'll need to add custom CSS in your Weglot Dashboard under Settings > Language Switcher > Custom CSS (see: How to add custom CSS).

Here's a sample scenario illustrating how to modify the background image of an element on your website's translated version:

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

You'll have to swap out the language code (in this example, it's "fr"; for a full list, check Available Languages), the CSS selector for the element whose background you want to alter, and the URL for the new image you'd like to use in place of the original one.

Troubleshooting

• Hard-refresh your website or clear your browser cache if changes are not visible.
• Ensure there are no unnecessary queries in the media URL like ?v=randomNumbers at the end of the URL.
• Verify that the URL is correct and exists in your website's source code. To examine your website's source code, you can either right-click on any part of the webpage and choose "View page source," or use the keyboard shortcut—Ctrl+Alt+U for PC or Cmd+Opt+U for Mac.

Need Further Assistance?

If you encounter any issues, feel free to contact Weglot support with the necessary details:

• the URL where the media you wish to translate is located.
• the URL of the original media.
• the URL of the media you wish to translate to.