In this post
In this post
When building a multilingual website, the ability to translate images in WordPress is a common request when you need to show different images for different languages.
Translating images in WordPress comes in really handy especially when you deal with images containing text, text that needs to be translated for each language.
Image translation, or more generally, media translation is really straight forward using TranslatePress. As with other types of content, you will be able to translate images directly from the front-end, using TranslatePress visual translation editor.
This functionality extends to all media types, whether it’s images with text, sliders, videos or other uploaded media, you can use the same approach below to translate them as well as the associated meta information (e.g title, alt text).
If you’re in a hurry and a quick video tutorial will do it for you, you can watch this short video on image translation:
But if you want the full picture, keep reading!
Translate Images in WordPress
Translating images directly from the front-end was something our users constantly requested. We had a solution for this, in the form of a conditional shortcode based on language, which worked just fine.
However, this had to be used in the back-end, so somehow breaking the intuitive front-end translation flow that TranslatePress is known for.
You should be able to translate ANY type of content directly from the front-end. That’s why with a bit of refactoring, we moved the ability to translate images, sliders & more to the front-end. This makes it easier than ever to display different media based on language.
Some of the use cases of image translation in WordPress:
- having an image or website logo with text, that needs to change when you change the language.
- selling an ebook, where the cover needs to reflect the title in the selected language of your multi language site
- creating multilingual sliders, that contain several images with text that need to be translated
- translating WooCommerce product images (courses, events, books, t-shirts…really any type of product that has text on it)
Translating Images Containing Text
Now that we went through some of the use cases of image translation, let’s dive in the simple process of translating images containing text.
After installing and activating TranslatePress, you’ll notice a new Translate Site” item added in the admin bar.
Hover over it and click “Settings” to be taken to TranslatePress settings. From here you can add a new translation language. We’ll use Spanish for this example.
After that, simply “Save changes” and click “Translate Site” to start translating your site content.
You’ll be taken to a front-end visual translation interface. From here you can navigate to the page containing your image with text.
Simply hover over the image and click the pencil icon to replace it with a different image containing the text in Spanish.
In our case we have a blog post focusing on “Saving the trees”, that includes an image with text. After clicking the pencil icon, in the translation sidebar you can upload or select a different image source for the Spanish version.
Select or upload the translated version of the image, click “Save” and you’re done. Switching the language to Spanish will now display the Spanish version of the image with text.
You can also select the image by name from Translation sidebar, locating it in the drop-down of strings under Images option group.
Translating Image Title and Alt Attribute
Moving forward, besides the image source you can also translate meta information such as the title and alt attribute.
To translate the alt attribute you will need the SEO Add-on which is available in the premium versions of the plugin.
Translating the image alt text can have a positive impact on the search engine rankings in multiple languages.
Having the SEO add-on installed and activated, will give you access to translating the alt text when clicking an image. If your image has a title set in the original language, you’ll be able to translate that as well.
As seen in the image above, all the image meta information will be displayed together with the image source in the translation sidebar.
Translate Images Containing Links
Another popular scenario for WordPress image translation is when that certain image contains a link as well. For example an ebook cover image linking to a .pdf with its content, or different external links to where different versions can be purchased.
If your image links to something, TranslatePress will detect this and allow you to modify the media link or external url based on language.
If your image contains a link, you’ll notice an “Anchor link” displayed in the translation sidebar when selecting it. This can be used to have translated versions of your image link to different places.
In the example above we used it to link to different Amazon book pages. The English version links to the Amazon English title, while the Spanish cover links to Amazon Spanish version of the book.
Create Multilingual Sliders
Since sliders are basically a collection of images, you can use the same approach to translate an image slider or carousel containing multiple images.
You’ll simply need to hover over each image that needs to be translated, click the pencil icon and select the one you want to replace it with in a different language.
If the slider images contain links to certain local media files or link externally even, you can use the “Anchor link” to customize it based on selected language.
Here’s how the example slider looks when you switch languages on the front end.
Not bad for about 10 seconds of your time.
Wrapping It Up
Translating images in WordPress using TranslatePress now follows the same intuitive visual approach as with translating any type of content (be it Gutenberg blocks, Elementor content, forms, pop-ups & more).
TranslatePress Multilingual
Due to its front-end translation approach, you can use TranslatePress to translate all your website content, independently of how it was created.
Do you still have any questions about image translation in WordPress? Let us know in the comments!
If you found this post helpful, please check out our YouTube channel, where we constantly upload short & easy-to-follow video tutorials. You can also follow us on Facebook and Twitter to be the first to know each time we post.
Hello How Can I Change The BAckground Image?
Hello, I would like to know if for seo purpuses if one image will be the same in all the languages, should I do some kind of translation ?
Yes, it would help your SEO to translate the image alt text for each language, even if the image stays the same.
Thank you for your answear, when I translate the image alt text , Is the image duplicated ? or is just the same image with the reference to the other languages too ?
Thank you.
It’s the same image, it’s not duplicated when translating the alt text. Just the alt text will be different based on language.
But should you use different images with different filenames for SEO purposes? I mean in the case where the image is exactly the same. Should you only translate the alt, or would there be any benefit to uploading different filenames as well?
No, translating the alt text is all that’s needed. Unless the image contains text in a certain language, there’s no need to upload a different one.
Is it able to translate/change featured images in portfolios in any version of TranslatePress?
Yes, image translation works the same in all versions.
How do you change a background image? Is there CSS I can apply?
Yes, we have a class you could target that is named based on language, so you can do something like:
body.translatepress-ro_RO{ background: red; }Hi there can you change an element like the logo of the website?
The logo is an image with different text based on the current language.
Is there a method or a variable available that I can use to change the logo based on the current theme?
Hello! You should be able to translate a logo just like you would any other image on the site as long as it is a standard image file format (png, jpg, etc.) and not an SVG file format.
Hello,
My website is originally in French. I have created an english version.
I have uploaded translated images but once saved, original images in french always come back to the English article.
Could you please help me ?
Is there a way to also translate the image descriptions? As on my site the alt and title are translated but the description stays in English.