How to change a Media file (Image, PDF ...) in my translated version
In this article, you will find how to change any media (image, .pdf, .docx, .rar, and Youtube video) on your translated website.
You might need to display a different form of media (such as an image including text) in the translated version of your website. With Weglot, you can by adding the URL of the translated media in your translations. Translating media files such as PDFs is pretty straightforward. On the other hand, images can be loaded in various ways to ensure your website is loaded fast, and Weglot will need more information to translate them.
1) Prerequisites
To translate a media with Weglot, you'll need to:
- Upload the translated media to your website admin and retrieve its URL
- In the original version of your website, retrieve the URL of the media you wish to "translate"
2) Adding a media translation
1. Go to your Weglot dashboard > Translations list.
2. Select the language you wish to add the translation for.
3. At the top of the page, next to the search bar, click on the "Actions" button and choose the "Add a media translation" button:
4. A pop-up will appear where you must add the following:
- The URL of the media on the original page
- The URL of the media on the translated page
Click on the "Add" button.
It's done! You should now see the media translation directly in your Translations list, and the "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
The most common way an image is loaded is via the src attribute in the img tags in your website's source code.
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
Lazy loading consists in loading a different image depending on the size of the browser's window. It enables your website to display a smaller image on smaller devices, such as mobile phones. This ensures that your website always loads fast.
If the image you're trying to translate is lazy-loaded, copy all of the URLs contained in the data-src or the srcset attributes.
c) CSS background
Any block on your website can have an image as a background. If an image is loaded as the background of an element, you'll need to add a custom CSS rule to your Weglot Dashboard > Settings > Language Switcher > Custom CSS field, targetting the element in question (see How to add custom CSS).
Here is an example of changing an element's background image in the French version of your website:
html[lang="fr"] .my-element-class {
background: url("https://mywebsite.com/path/to/my/translated-image.png") !important;
}
You'll need to replace the language code (here "fr", see Available Languages for more information), the CSS selector of the element you wish to change the background of, and the URL of the image you wish to replace the original image with.
Troubleshooting
If the media translation doesn't work, make sure to follow the following steps:
Don't hesitate to Hard-Refresh ( Mac: cmd-shift-R / PC: ctrl-F5) your website's page and check back in an incognito window if you don't notice the changes.
Make sure that there is no unnecessary information in your media's URL, such as queries like ?v=randomNumbers at the end of the URL.
Make sure the URL added is the correct one and is present in your website's source code.
You can check your website's source code by right-clicking anywhere on the page and selecting "View page source" or through the shortcut ( PC: ctrl-alt-U / Mac: cmd-opt-U)
If your media translation still doesn't seem to work, you can contact us with the following information:
- the URL where the element you wish to translate is located
- the URL of the original media
- the URL of the media you wish to translate to