Skip Navigation

[Resolved] Help with WPML compatibility

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

Problem:
The customer is using the WPML plugin to translate their website and encountering two major issues:

1- Images are not being displayed on some pages.
2- URLs are automatically adding a "." at the end, leading to 404 errors.

Solution:
1- URL Issue:

I identified and removed the extra character causing the URL issue by editing the view translation.
This resolved the broken links.

2- Image Display Issue:

The issue was caused by malformed HTML, specifically the custom HTML used to insert left and right arrow buttons in the sliders.
The Advanced Translation Editor was encoding the HTML tags, breaking the display.
Two possible workarounds were suggested: using actual Toolset components or registering the arrows as shortcodes.

I implemented the second workaround with the help of our 2nd tier support:

- Added a shortcode to functions.php to register the custom widget:

add_shortcode('glide_arrows', function () {
    return '<div class="glide__arrows" data-glide-el="controls">
                <button data-glide-dir="<" class="glide__arrow glide__arrow--left"><span class="tb-slider-left-arrow"></span></button>
                <button data-glide-dir=">" class="glide__arrow glide__arrow--right"><span class="tb-slider-right-arrow"></span></button>
            </div>';
});

- Registered the glide_arrows shortcode in Toolset settings.
- Edited the template containing the sliders and replaced the div with the arrow buttons with the [glide_arrows] shortcode.
This resolved the issue with the images.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Sao_Paulo (GMT-03:00)

Tagged: 

This topic contains 15 replies, has 2 voices.

Last updated by Mateus Getulio 5 months, 1 week ago.

Assisted by: Mateus Getulio.

Author
Posts
#2699080
Screenshot 2024-05-23 at 1.44.36 AM.png

Hi, I just started using the WPML plugin to translate our website.

There is a big issue on some pages. For example on the following page, the pictures are not being shown and when I try to click on any button of our listings, it sends us to the 404 page. For some reason, all URLs are adding a "." at the end of each URL automatically which breaks the link.

hidden link

I look forward to receiving your support on these issues. Thank you very much!

#2699154

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello,

I would like to request temporary access (wp-admin and FTP) to your site to take better look at the issue. You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Our Debugging Procedures

I will be checking various settings in the backend to see if the issue can be resolved. Although I won't be making changes that affect the live site, it is still good practice to backup the site before providing us access. In the event that we do need to debug the site further, I will duplicate the site and work in a separate, local development environment to avoid affecting the live site.

Privacy and Security Policy

We have strict policies regarding privacy and access to your information. Please see:
https://toolset.com/purchase/support-policy/privacy-and-security-when-providing-debug-information-for-support/

**IMPORTANT**

- Please make a backup of site files and database before providing us access.
- If you do not see the wp-admin/FTP fields this means your post & website login details will be made PUBLIC. DO NOT post your website details unless you see the required wp-admin/FTP fields. If you do not, please ask me to enable the private box. The private box looks like this: hidden link

Please, let me know if you need any additional details. Have a nice day.

#2699298

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

links.png

Hey there,

Regarding the links, I edited the view translation and I was able to find that character in there(please check the screenshot), I removed it from the translation and it fixed the link.

Regarding the issue with the gallery, I checked this out but so far I couldn't find a fix for it.

I asked my colleagues to have a look at this issue in order to see if there's anything I'm missing.

I'll come back here as soon as one of my colleagues reply back to me (which it shouldn't take long).

Thanks,

#2699306

Thank you very much for the update Mateus, I look forward to solving the picture part of the listing images.

#2699686

Hi there, when do you think the picture issues will be resolved?

#2699694

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

Our team checked it and identified that the problem is a malformed HTML, while the original page has

<button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span class="tb-slider-left-arrow"></span></button>

the translation becomes:

<button class="glide__arrow glide__arrow--left" data-glide-dir="<encoded_tag_open />"><span class="tb-slider-left-arrow"></span></button>

That causes the left arrow in the slider to be shown as text rather than the visual icon.

While we identified the issue, we're still working on a fix.

The only workaround available for the time being would be for translate that page manually from scratch:https://wpml.org/documentation/translating-your-contents/using-different-translation-editors-for-different-pages/

Basically you need to edit the page containing the view in the main language and switch to the secondary language in the admin top bar, then if you try to edit the view, Toolset will warn you that you'll lose the previous translation and that you'll use the WordPress editor for the translation.

We thank you for your patience while we're investigating it and looking for a definitive fix or a better workaround.

Best,
Mateus

#2699705

Thank you so much Mateus, at least we are progressing. If we can solve this issue in the soonest time, I would much appreciate it.

I also hope that Brazil will have the fastest recovery after the natural disaster. Looking forward to hearing back from you.

#2699833

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Thank you for your kind words, I hope our country recovers from it as soon as possible, it was really sad what happened in the South.

I checked it and it looks like the wp-admin credentials are no longer working for us, perhaps this info changed?

I enabled the private fields again in case you need to share new credentials.

Thank you and I apologize for the back and forth.

#2699927

Hi Mateus, I was wondering if you managed to log in to your account or not. I would sincerely appreciate if we could get this issue solved soon with your tremendous amount of support.

#2699965

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

sliders1.png

Hello there,

Yes, the access is working again, thanks a lot.

Our 2nd tier support team worked on that page and manually fixed the issue with the slide, please check the screenshot.

While we fixed it, we're still trying to identify what caused it, we'd recommend not editing the translation just for the time being.

We believe something is breaking in the HTML when the page is translated using the Advanced Translation Editor, we'd like your help in the next step of debugging.

We need to replicate this issue to a fresh install of WordPress + WPML + Toolset that can be access here: hidden link

Here's what is needed to be done:

1- Install Essential Components Only: In the sandbox provided in my private reply above the WPML is already installed and set up, Toolset is installed and active as well, please install your theme and only the plugins necessary to replicate the issue with the sliders. Avoid importing the entire site.

2- Set Up the Page and Configurations: Mirror your current setup that's causing the issue, focusing on the pictures of the sliders, we only need the site to be partially replicated up to a point where we can debug this issue, it is not necessary to replicate the entire page, just the sliders.

3- Notify Us Once Done: After replicating the issue in the sandbox, inform us through this ticket so we can proceed with further analysis.

The goal here is to identify if the problem is indeed related to the Advanced Translation Editor or if it is a compatibility issue, reproducing it in a controlled environment.

We appreciate your cooperation in this matter. Let us know once you've set up the sandbox.

Best,

Mateus

#2700196

Hi Mateus,

Thank you very much for your support and the problem seemed to be fixed. I would appreciate it if you could share your current solution so that I can apply for other language translations to finish this project.

I can set up the theme on the link that you shared but the listing view and properties are fully customized. I currently don't have much time to mirror the pages one by one.

Is there any easier way to do this?

Kind regards,

Talatcan

#2700349

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hi Talatcan,

I was unavailable yesterday, sorry for the delay with my reply.

I was able to replicate the issue on a fresh copy of WPML, please disregard my previous request.

I have escalated this ticket to the WPML 2nd tier of support where our senior specialists will take a deeper look at this issue and will try to find a solution.

I will get back to you as soon as I get an answer from them.

Thank you for your patience while we investigate this,
Mateus

#2701448

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello Talatcan,

Upon further review, our 2nd tier team identified that an issue with the custom HTML you used to insert the right and left arrows caused the issue with the translation. It looks like the custom HTML is already encoded if we switch to the text mode inside the WordPress editor. This is affecting how the Advanced Translation Editor saves the translation.

Two possible workarounds would be for you to use the actual Toolset components rather than the custom HTML block.

Or, register the arrows as shortcodes within Toolset to avoid the issue with the encoded char.

I went ahead and applied the 2nd workaround for you, I tested it and it fixed the issue.

These are the steps I took:

- Add the following code to the functions.php to register the custom widget:

add_shortcode('glide_arrows', function () {
    return '<div class="glide__arrows" data-glide-el="controls">
                <button data-glide-dir="<" class="glide__arrow glide__arrow--left"><span class="tb-slider-left-arrow"></span></button>
                <button data-glide-dir=">" class="glide__arrow glide__arrow--right"><span class="tb-slider-right-arrow"></span></button>
            </div>';
});

- Go to Toolset > Settings > Front End Content > Third-party shortcode arguments and register glide_arrows as a custom shortcode
- Edit the template containing the sliders and replace the div that has the arrow buttons with the shortcode we created [glide_arrows]

After doing it, I went ahead and translated the page using the Advanced Translation Editor again and the issue is no longer hapenning.

Can you please test it again to confirm it is everything OK now?

Best,
Mateus

#2702319

Hi Mateus, I will try your implementation and check again. The issue was most likely related to the Japanese Language.

I will try and get back to you asap.

#2702349
Screenshot 2024-06-13 at 1.52.48 AM.png

Hi Mateus, it worked!!! That's an awesome solution!

The only thing is... No matter what I did, the filter section is not getting translated even though it seems translated when you check the translation of the template page.

Is there anything that you can help me out with this issue?