Skip to content Skip to sidebar

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client was experiencing issues with displaying the correct translated image on a page using WPML and WP Bakery. The image was not updating to the translated version and remained as the original on the translated page.
Solution:
We identified that the issue was related to how WP Bakery handles CSS attributes for background images. We provided several workarounds:
1. Replace the background image with a simple image widget inside the column. This method allows the Media Translation to function correctly, although it does not support the 'cover' property.
2. Manually edit the image URL on the translation page.
3. Apply a CSS override with a language-specific rule to ensure the correct image displays for each language.
We also escalated the issue for further review by our developers. Meanwhile, we recommend trying one of these workarounds.

If these solutions do not resolve your issue, or if they seem outdated or irrelevant to your case, please visit our support forum to open a new ticket. We also 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.

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.

Tagged: 

This topic contains 20 replies, has 0 voices.

Last updated by georgiM-3 1 week, 1 day ago.

Assisted by: Kor.

Author Posts
August 22, 2025 at 2:18 pm #17340870

georgiM-3

"""""""1. I understand now. If your goal is to translate the image itself, the correct method is to use the Media Translation add-on https://wpml.org/documentation/getting-started-guide/media-translation/

Since you’ve switched to manual translation, you can continue that way. I checked your English backend editor here hidden link
. Are you able to change the image there?""""""

I did the translation as you showed me. I am attaching images

August 22, 2025 at 2:19 pm #17340873

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your reply. I've checked your translated page here hidden link and the image at the bottom is showing the correct translated page. Are you still having issues with this?

August 22, 2025 at 8:08 pm #17341391

georgiM-3

Please show me how to upload an image, file, video in the original language and translate it.

August 24, 2025 at 8:25 pm #17343457

georgiM-3

I made an attempt to translate an image with the media translation and integrate it on this page:

hidden link

I have attached images.

1. I have uploaded the image to media. 2. In the middle of the translation, I loaded another image for the English version.

But the translated page does not load the translated image, but the original.

Screenshot 2025-08-24 231834.jpg
Screenshot 2025-08-24 231808.jpg
Screenshot 2025-08-24 231629.jpg
Screenshot 2025-08-24 231510.jpg
August 25, 2025 at 3:50 pm #17345723

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your reply. I can see the issue now. I regret any inconvenience caused, but to proceed with troubleshooting, I kindly ask for a snapshot of the site. Alternatively, with your permission, I can create one myself. For this purpose, I typically recommend using the free plugin "Duplicator." If you're already familiar with Duplicator (https://wordpress.org/plugins/duplicator/), please skip the following steps and simply send me the archive file you downloaded.

To guide you further, please adhere to these instructions:

1. View the Duplicator instructions video: hidden link

2. Consult WPML's instructions on providing supporters with a copy of your site: https://wpml.org/faq/provide-supporters-copy-site/

3. If the archive file exceeds 400MB, please use Duplicator's file filters to exclude cache, wp-uploads directory, media, and archive files.

Once you have the archive file ready, kindly share the link with us. You can utilize platforms like Google Drive, Dropbox, or similar for file sharing, as the snapshot file might be large.

Please note that your next reply will be private, visible only to you and me. You can paste the file link there. Rest assured that once the issue is resolved, I will delete the local site.

August 25, 2025 at 6:33 pm #17346182

georgiM-3

Duplicator is installed in the admin panel. I'd rather you do whatever you need to do. Tell me if I have to do something?

August 26, 2025 at 5:39 pm #17349264

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your reply. I've generated a backup here hidden link and I've downloaded it. I will check and come back to you as quickly as possible.

August 26, 2025 at 8:06 pm #17349594

georgiM-3

Thanks, I hope the problem will be solved soon

August 27, 2025 at 7:20 pm #17352820

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your patience. I will have to escalate this further to our 2nd Tier Support for further investigation. I will get back to you as quickly as possible.

September 1, 2025 at 7:30 pm #17364001

georgiM-3

Hello
Any positive progress on the translation issue?

September 2, 2025 at 12:28 pm #17365981

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your patience. Our 2nd Tier Support requested that we replicate the issue on our sandbox site here hidden link .

Could you install the required theme and plugins and try to replicate the issue over there? I've installed the WPML and addons for you.

September 2, 2025 at 2:48 pm #17366772

georgiM-3

It's been almost a month, we still haven't defined the problem. This is terrible. The site is not working well and I am under pressure. I think there are a few problems.
1. The translation through the WP editor breaks right after the pages are made.
2. Photos are not showing the translated photos.

I have installed the theme and am making a portfolio on issue 2

September 2, 2025 at 3:07 pm #17366912

georgiM-3

I made an example text and photo. I made a translation with WPML editor. I also made the mobile version, as it is on the orogonal site. Is this enough or do we need something more?

Screenshot 2025-09-02 180409.jpg
September 2, 2025 at 5:26 pm #17367310

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your reply. That's all I need, and I'm sharing this with our 2nd Tier Support for a second look. I will come back to you once I've feedback.

September 3, 2025 at 3:29 pm #17371559

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your patience. I have some feedback from our 2nd Tier Support, and this is what he mentioned.

The issue is related to WP Bakery itself and the way they store the CSS attribute.

The shortcode looks like this:

[vc_column width="1/2" offset="vc_hidden-sm vc_hidden-xs" css=".vc_custom_1756823799220{background-image: url(<em><u>hidden link</u></em>) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"][/vc_column]

Which translates into the following CSS:

.vc_custom_1756905605524 {
    background-image: url(<em><u>hidden link</u></em>) !important;

Workarounds

1st Option:
Instead of using a background image on the column, the client can use a simple image widget inside the column

Pros: Very easy to do, Media translation works as expected
Cons: you won't be able to use the "cover" property and therefore the image size must fit.

BG doesn't fit: hidden link

EN fits: hidden link

2nd Option:
Manually edit the image URL in the translation page

3rd Option:
Overwriting the URL in CSS with a language-specific rule:

*:lang(en) .vc_custom_1756905605524 {
background-image: url(hidden link) !important;
}

We have escalated this further and our devs will review it. In the meantime, please use one of the recommended workarounds suggested above.