[Resolved] How do I use different images for translated FSE Template part?
This thread is resolved. Here is a description of the problem and solution.
Problem: The client needs to use different images in FSE template parts based on the language, specifically for logos that include text in English and French versions. The media translation plugin works for content but not for FSE template parts. Solution: We recommend manually editing the translation of the templates. Here are the steps: 1. Edit your template in the default language. 2. Switch to the desired language using the language switcher in the admin bar. 3. Manually add a different media file for the logo in the template and update. Alternatively, you can: 1. Go to WPML->String Translation. 2. Search for the Logo URL. 3. Translate it by adding the URL to the image you want to use for the different language. However, these methods are workarounds. For a more consistent solution, follow the steps in our documentation on translating sites that use full site editing, which you can find here: Translating sites that use full site editing.
If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you still need assistance, please open a new support ticket at WPML support forum.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
Background of the issue:
We've got several FSE template parts that use images to display logos. The logos include text, so there are different images for the English version of the logo and the French version. I know how to translate the text content of these templates but how do we use different images in these templates based on language?
I've tried using the media translation plugin - it works great in the content but not in these FSE template parts.
Symptoms:
For example, we have logo images in the footer, the McCall MacBain International Fellowships logo should change to Bourses Internationales McCall Macbain (as it does in the body of the page above)
Questions:
How do we use different images in FSE template parts for English logo and French logos?
Are you able to manually edit the translation of the templates?
Edit your template in the default language->switch using the language switcher in the admin bar -> edit the template manually and add a different media then update
Another option is to also go to WPML->String Translation->search for the Logo URL for example-> translate it and in the translation add the URL to the image you would like to use.
Thanks for this! I didn't realize that if I switch into the French version of the site via the admin bar that I could directly edit these template parts, specifically for French. There's no admin bar in the site editor to indicate which language I'm currently in, pretty confusing but workable.
I was able to change an image by adding a translated version of it via Media Translation then heading into the English version of the pattern and re-selecting the image.
One of the images in an SVG image we've added via a data URL - this I'm also able to update in the French version of the pattern - it shows the correct version of the SVG, but it doesn't show up on the front end. Any ideas what might be happening there?
Actually, I'm now seeing is that updating the French version of the template part overwrites the English version so it seems that making direct updates to template parts isn't possible. Just updating text via string/translation jobs and updating images via the media translation. Please let me know if I'm missing something!
I would like to request temporary access (wp-admin and FTP) to your site to test the issue.
(preferably to a test site where the problem has been replicated if possible)
**Before we proceed It is necessary to take FULL BACKUP of your database and your website. Providing us with access, you agree that a backup has been taken **
I often use the Duplicator plugin for this purpose: http://wordpress.org/plugins/duplicator/
You will find the needed fields for this below the comment area when you log in to leave your next reply.
The information you enter is private which means only you and I have access to it.
NOTE: If access to the live site is not possible and the staging site does not exist please provide me with a duplicator package created with the duplicator plugin.
Thanks for your patience. While I'm not able to give you access to the site directly, I've created a duplicator package for you to download here: hidden link
I will note that we're able to follow the procedure that you've outlined above on our local setups but not on the staging/dev site. This is even though at least my staging pulls the database and files directly from staging/dev.
Anyways, thanks so much for your help, I'm excited to hear your thoughts!
Languages: English (English )Portuguese (Brazil) (Português )
Timezone: America/Sao_Paulo (GMT-03:00)
Hello Alexandra,
Bobby is not available at the moment so I'll be taking this case over.
Thank you for providing us with the package of the site. We imported it successfully and started our debugging.
While checking this, I noticed that the example you shared, the logo McCall MacBain International Fellowships, has been translated to Bourses Internationales McCall Macbain and it is no longer showing the same version for both languages.
Is there another example you could share or maybe specific steps I need to take in order to replicate this issue?
Thanks for reviewing. I ended up using Media Translations to accomplish what we needed to but Bobby mentioned that I should be able to make changes directly in the French version of a template part. But when I do this, it overwrites the English version. For example, if I go to the French version of the footer and change the text above the subscription form or change one of the images in the logo grid (one that isn't already translated using Media Translations), and save my French footer - the English version of the footer will now show French content instead of the English content.
Hope this helps to investigate further and thank you!
Thanks for sharing your deployed version of our staging site. There I was able to directly edit the French version of our footer (under Appearance -> Editor, since this is an FSE site) without it overwriting the English version.
I wonder if we're not able to do this on our staging site because of server configuration or because we're using separate domains for each language?
Thank you for updating me! This might be a possibility, what I noticed is that you have to make sure you are viewing the secondary language in the backend before accessing the FSE editor.
However, I would have to retract my statement from earlier regarding the manual translation and say that it can be used as a possible workaround but it is not recommended per our documentation.
The recommended way is to use the steps from this documentation when working with FSE templates.
Thanks, Bobby. The official FSE translation approach is the one we ended up using, which worked well. With the workaround you suggested, there was no way to tell which language we're currently editing (the admin bar isn't shown in the site editor) so while it could be faster it might be more confusing along the way.
It sounds like there's nothing more to do at this time since the official translation method is working. Thank you!
