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 whacth 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 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 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 translation” 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.
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 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.
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).
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.