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.
