Skip Navigation

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

Problem

The client reported that after changing the slider type from Nectar Slider to \"Basic Slider\", the images displayed correctly in both English and French pages. However, the Salient Blocks for the Slider were missing from the French translation's backend, even though the slides were functioning correctly with the Basic Slider. The client was concerned about the differences in blocks shown between the English page and the French translation, particularly the missing Image Gallery block.

Solution

We recommended adding custom XML configuration to the WPML settings to ensure compatibility with the Nectar Slider. Here are the steps to follow:

<wpml-config>
  <shortcodes>
        <shortcode>
            <tag>vc_gallery</tag>
            <attributes>
                <attribute encoding="allow_html_tags">title</attribute>
        <attribute encoding="vc_safe">custom_links</attribute>
        <attribute type="media-ids">images</attribute>
        <attribute encoding="base64">items</attribute>
      </attributes>
    </shortcode>    
  </shortcodes>
</wpml-config>

After adding the code, make a change on the page in question and update the translation.

For more information:

https://wpml.org/documentation/translating-your-contents/page-builders/how-to-register-page-builder-modules-and-theme-options/#registering-shortcodes

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 17 replies, has 2 voices.

Last updated by Christopher Amirian 1 year, 2 months ago.

Assisted by: Christopher Amirian.

Author Posts
October 20, 2023 at 6:25 pm #14626807

Seraphim

I am trying to: use translated images of a Graph "An Efficient Frontier" (near the bottom of the page).

Link to a page where the issue can be seen:

English Page: hidden link

French Page: hidden link

I expected to see:

The translated images FE1.png through FE6.png.

Instead, I got: The English images EF1.png through EF6.png.

NOTE:

The Media Translator has a bunch of images listed (see upload) that have been deleted from my Media Gallery. These images were improperly tagged as "French" when uploaded. How to I remove these?

Screenshot 2023-10-20 at 2.11.54 PM.png
October 21, 2023 at 1:34 pm #14628499

Christopher Amirian
Supporter

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

The reason that those images are tagged in French is that they were uploaded while the top admin language bar was set to French.

You can force WPML to re-scan the media using the method below:

- Go to "WordPress Dashboard > WPML > Settings > Media Translation".
- Make sure that all the enabled checkboxes there are checked.
- Click the "Start" button.
- Wait for the process to finish.

Also please update WPML to version 4.6.7:

- IMPORTANT STEP! Create a backup of your website. Or better approach will be to test this on a copy/staging version of the website to avoid any disruption of a live website.
- Go to "WordPress Dashboard > Plugins > Add new > Commercial (tab)".
- Click the "Check for Updates" button.
- Update WPML and its addons there.

For more information:
https://wpml.org/faq/install-wpml/#automated-updates

Finally follow the steps below:

- Go to your Dashboard > Pages.
- Open the edit screen of the original page. You should see a pencil/circle/gear icon in the sidebar options under the "Languages" section.
- Make a small change, for example, add an extra blank space at the end of a sentence/paragraph.
- Save it.
- You should now see that a circular arrow appears beside the 2nd languages links, this means that an update is required.
- Edit the translation again and save it up to 100% translated.

Thanks.

October 21, 2023 at 2:27 pm #14628853

Seraphim

Hello Christoper,

Thank you for your answer.

1. I managed to delete the conflicting images yesterday.
2. I uploaded fresh images while I was toggled in as ENGLISH.
3. I translated these images using Media Translator into the French versions. (SEE IMAGE)
4. Made a small edit on the English page and then re-translated the French page.

However, the French page is still using English versions of these images (this all pertains to the An Efficient Frontier graph near the bottom of the page).

English Page: hidden link
French Page: hidden link

NOTE: One thing to note is that I added this graph slider to the English page AFTER I had initially translated it into French.

Now, the French page is missing these block elements (I am using the Salient Theme from Themenectar).

Note the images which show the blocks on the English page and how they are missing on the French page. (SEE IMAGES)

QUESTION: How do I get these pages to sync again? Do I have to delete the French translation?

Lastly, how do I safely update WPML to the latest version? I'm new to WPML and purchased it last week. Other than the graph issue, so far, so good.

Thank you.

Screenshot 2023-10-21 at 10.11.06 AM.png
Screenshot 2023-10-21 at 10.18.57 AM.png
Screenshot 2023-10-21 at 10.24.10 AM.png
October 22, 2023 at 1:03 pm #14631029

Christopher Amirian
Supporter

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

Ok as you use the Salient theme you might have been using the Nectar Slider. Please make sure that you follow the steps below to translate it:

https://wpml.org/documentation/theme-compatibility/create-multilingual-wordpress-websites-using-the-salient-theme-and-wpml/#translating-nectar-sliders

Here is how to update WPML:

- IMPORTANT STEP! Create a backup of your website. Or better approach will be to test this on a copy/staging version of the website to avoid any disruption of a live website.
- Go to "WordPress Dashboard > Plugins > Add new > Commercial (tab)".
- Click the "Check for Updates" button.
- Update WPML and its addons there.

For more information:
https://wpml.org/faq/install-wpml/#automated-updates

Thanks.

October 22, 2023 at 4:31 pm #14631517

Seraphim

Hello Christoper,

Thank you for your suggestions. Unfortunately, they have not solved the problem.

1. Please note that there are NO slides in my Nectar Slider section (see attached image).

2. I have used a nectar slider within my English Page (see attached image).

3. This slider was added to the English Page AFTER I had originally translated it into French.

4. The slider section (and new others below it) is NOT shown in the French Pages EDIT section (see image).

5. Lastly, I don’t want to translate a TEXT overlay on a nectar slider from English to French.

6. I want to SUBSTITUTE a French image (which has French text on its original PNG file) for an English image (which has English text on its respective PNG). (see 2 attached images - one ENG and one FR)

Could the problem be that I added the nectar slider portion to the English Page AFTER it was translated into French?

Although the slider is NOT shown in the French pages edit screen, it does appear on the front end - but with English graphics and not the correct Media Translated French ones.

Thanks,

EF1.png
FE1.png
Screenshot 2023-10-22 at 12.18.18 PM.png
Screenshot 2023-10-21 at 10.24.10 AM.png
Screenshot 2023-10-21 at 10.11.06 AM.png
October 23, 2023 at 12:00 pm #14637911

Christopher Amirian
Supporter

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

Thank you for the reply. I wonder if you use the manual translation or the advanced translation editor?

If you click the pencil icon to see the translation do you see the WordPress native editor or an editor like this:

hidden link

If the first one, then you are using a manual translation mode and you will need to manually add the nectar slider for the French page as those are considered as manual.

But if you use the Advanced Translation editor then you should not go to the WordPress editor in French at all and you just need to finish the translation.

I'd appreciate it if you could give me the URL/User/Pass of your WordPress dashboard after you make sure that you have a backup of your website.
It is absolutely important that you give us a guarantee that you have a backup so if something happens you will have a point of restore.

Make sure you set the next reply as private.

October 23, 2023 at 12:51 pm #14638185

Seraphim

Please find a screenshot of my Translation Editor. I am using the Advanced Editor.

As noted, the French Page (WP Bakery Editor) is missing any visible blocks related to showing the slider which should show the Media Translated French versions of the graph.

I have just made a full backup of the website via Updraft Plus and stored a copy in Google Drive.

I have created a username and password for you to give you Admin access.

How do I send a private message or mark this post as private? I don't see a way.

Should I email you instead? Please let me know.

Thanks,

Screenshot 2023-10-21 at 10.24.10 AM.png
Screenshot 2023-10-21 at 10.11.06 AM.png
Screenshot 2023-10-23 at 8.32.03 AM.png
October 23, 2023 at 2:39 pm #14639365

Christopher Amirian
Supporter

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

Thank you, in the next reply you will have the option to set the reply as private, it is a checkbox then you will be able to give the login information.

Thanks

October 24, 2023 at 2:12 pm #14648629

Seraphim

Hello Christoper,

Has there been any progress on this issue? We are now 5 days into the support request. I hope to get it sorted and the issue fixed as soon as possible.

Thank you.

October 24, 2023 at 3:28 pm #14649275

Christopher Amirian
Supporter

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

I spent some time on this issue and it seems the problem is the Image Gallery widget that you use.

WPML Media Translation plugin does not understand that widget and that is why even when I go to WPML > Translation Management and select the Knowledge Center page, only two images are detected as the ones that can be sent for translation.

For now, I'd appreciate it if you can do the workaround below:

Go to the French version of the page in the WordPress editor and manually add the Image Gallery section with the French images.

See if it works.

To be able to report this to the compatibility team we need to replicate the issue on a clean installation.

I created a clean WordPress installation, would you please kindly install Salient theme and necessary plugins of that theme and add a simple image gallery there so I can report this?

hidden link

That way it will be faster as the compatibility team will have a clean slate to work with an find a code solution.

Thank you.

October 24, 2023 at 7:42 pm #14650585

Seraphim

Hi Christoper,

1. FYI, I changed the slider type from Nectar Slider to "Basic Slider" and the images are noW being properly shown on the English and French pages respectively.

2. One thing to note is that the Salient Blocks for the Slider (Basic or Nectar) are still missing from the French translation's backend (even though the slides now are OK when using the Basic Slider). SEE IMAGES ATTACHED

3. I uploaded a copy of the theme to the Sandbox and created a test page with the nectar slider:

hidden link

I didn't add any images to the slider. Let me know if you want me to do so.

Screenshot 2023-10-24 at 3.35.50 PM.png
Screenshot 2023-10-24 at 3.37.24 PM.png
October 25, 2023 at 1:33 pm #14661539

Christopher Amirian
Supporter

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

I am glad that you have found a way.

I reported this to the compatibility team.

They will take a look and see if there is a way to use separate images for the translation while using the Salient theme.

Thanks.

October 25, 2023 at 6:07 pm #14663989

Seraphim

Hi Christoper,

While my workaround suffices for now, I hope that your team solves the Nectar Slider compatibility issue.

My main concern is that (as noted) the English Page and French Translation differ in terms of the blocks shown (name the French page's backend missing the Image Gallery block).

1. Could this be due to the fact that this Image Gallery was added AFTER the English Page was first fully translated?

2. How do I treat cases where I need to add new blocks or sections to an English page after a French translation has been made and published?

Please see the images below.

Screenshot 2023-10-24 at 3.35.50 PM.png
Screenshot 2023-10-24 at 3.37.24 PM.png
October 28, 2023 at 1:40 pm #14683861

Christopher Amirian
Supporter

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

I have an answer from the compatibility team.

Please go to WordPress Dashboard > WPML > Settings > Custom XML Configuration (tab) and add the code below there:

<wpml-config>
  <shortcodes>
		<shortcode>
			<tag>vc_gallery</tag>
			<attributes>
				<attribute encoding="allow_html_tags">title</attribute>
        <attribute encoding="vc_safe">custom_links</attribute>
        <attribute type="media-ids">images</attribute>
        <attribute encoding="base64">items</attribute>
      </attributes>
    </shortcode>    
  </shortcodes>
</wpml-config>

After that go to the page in question and do a change there and update the translation and it should work ok.

Please get back to us with the result.

Thanks.

October 31, 2023 at 7:14 pm #14703373

Seraphim

Thank you, Robert.

I will test it on a sample page and report back.

Per my questions above.

Is there an issue if I fully translate a page and add an element (like a block) to the English page later?