WPML Lightbox and Featured Images

[Wolfgang]

Hey there,

not sure if this is really a bug or if I am doing something wrong. I’ve tried WPML for the first time and probably I’m just overseeing something. However, I am facing some problems with WPML regarding Query Blocks (featured Images) and Lightbox Images.

1. Lightbox Images:
   I have a couple of images set to open with Lightbox…However, when I open it with Lightbox it shows me (in the translated version) a white screen with the admin bar…
   
   

The source of the Lightbox-Images looks the following:

I’ve found that there was a bug with the translated strings replacing the chicly dynamic brackets not correctly, maybe that bug came back? See here: 1.2.9.9

The 2nd possible bug is with using a featured Image inside the query block:

Probably the same source, cause when I look at the rendered markup it seems that there is also something missing in the src Attribute:

Did anyone else faced that issue with WPML? Am I doing something wrong? I’ve searched their forums and couldn’t find anything helpful. There were a few topics which seemed that they could help, but they didn’t help at all (like this one here: https://wpml.org/forums/topic/gutenberg-queryloop-block-image-not-translated/).

I’m a bit desperate Any help highly appreciated

Thanks in Advance All!

Cheers
Wolfgang

[Wolfgang]

PS: The interesting thing about the Lightbox is, that the image itselfs renders fine. Although it doesn’t use any dynamic values, it seems that the src of that image is also corrupted, but the srcset seems to be fine, so that’s probably why it looks ok when not opened in a Lightbox.

[StrangeTech]

Hey @Wolfgang,

@Wolfgang

Did anyone else faced that issue with WPML?

I’m curious whether you are using the WPML sticky links plugin, as we stopped using that due to incompatibilities with other plugins in recent versions of WP.

[Wolfgang]

Hey @StrangeTech,

nope I’m not using that plugin. Only using the followings:

• WPML String Translation
• WPML Multilingual CMS
• WPML Media
• Advanced Custom Fields Multilingual

But not sure yet what I’ll definitely need and what not since it’s the first time with WPML for me, so probably some plugins could follow But its good to know that “sticky links” has some incompatibilities, thanks for that information

CHeers

[Wolfgang]

Hey all,

just in case anybody else is stumbling across that thread and also to provide the cwicly team more time in checking and fixing their bugs. As the Site needs to get online the day after tomorrow I’ve written a temporarly fix for that Problem.

Note, that you would have to add an Attribute to all images that are inside a query loop and use the “featured image” option, since there is no reference to that ID stored in the outcome.

But it fixes the problem with the Lightbox very good, and also the problem with the missing src=“” one (which was ok because of the correct srcset). Probably not the best one since I always hate it when I have to develop in PHP, and my co-worker ChatGPT helped me a lot, but it works, and that’s the glue I need for the moment

<?php 
// Add the attribute "data-featured-image" with the ID of the post to all images that use a featured image dynamic data.
function custom_filter_media_srcs($content, $pattern, $callback) {
    return preg_replace_callback($pattern, $callback, $content);
}

function replace_media_src($content) {
    // Regex und Callback für img-Tags mit src-Attribut
    $imgPattern = '/<img[^>]+src="(%7B[^"]+%7D)"[^>]*>/i';
    $content = custom_filter_media_srcs($content, $imgPattern, 'img_src_callback');

    // Regex und Callback für a-Tags mit href-Attribut
    $aPattern = '/<a[^>]+href="(%7B[^"]+%7D)"[^>]*>.*?<\/a>/is';
    $content = custom_filter_media_srcs($content, $aPattern, 'a_href_callback');

    // Regex und Callback für img-Tags mit data-featured-image
    $dataImgPattern = '/<img[^>]+data-featured-image="(\d+)"[^>]*>/i';
    $content = custom_filter_media_srcs($content, $dataImgPattern, 'data_img_callback');

    return $content;
}

function img_src_callback($matches) {
    $originalTag = $matches[0];
    $encodedUrl = $matches[1];
    $mediaId = extract_media_id($encodedUrl);
    if ($mediaId) {
        $correctUrl = get_media_url_by_id($mediaId);
        return str_replace($encodedUrl, $correctUrl, $originalTag);
    }
    return $originalTag;
}

function a_href_callback($matches) {
    $originalTag = $matches[0];
    $encodedUrl = $matches[1];
    $mediaId = extract_media_id($encodedUrl);
    if ($mediaId) {
        $correctUrl = get_media_url_by_id($mediaId);
        return str_replace($encodedUrl, $correctUrl, $originalTag);
    }
    return $originalTag;
}

function data_img_callback($matches) {
    $originalTag = $matches[0];
    $postId = $matches[1];
    $featuredImageId = get_post_thumbnail_id($postId);
    $correctUrl = $featuredImageId ? wp_get_attachment_url($featuredImageId) : '';
    return str_replace('%7Bfeaturedimage=true=false=false=true=false%7D', $correctUrl, $originalTag);
}

function extract_media_id($encodedValue) {
    if (preg_match('/%7Bfeaturedimage=[^=]*=[^=]*=[^=]*=true=(\d+)%7D/', $encodedValue, $matches)) {
        return $matches[1];
    }
    if (preg_match('/%7Bimagesrc=(\d+)=/', $encodedValue, $matches)) {
        return $matches[1];
    }
    return null;
}

function get_media_url_by_id($mediaId) {
    $mediaPost = get_post($mediaId);
    return $mediaPost ? wp_get_attachment_url($mediaId) : '';
}

add_filter('the_content', 'replace_media_src');

Cheers
Wolfgang

[Wolfgang]

Hahahaha forget what I wrote before. It’s a typical example of overcomplicating things …

I never thought that this would work, but it seems to work xD… There were a few other problems with %7B (which stands for ‘{’) and %7D (which stands for ‘}’ ), specially the links didn’t show up correctly, and probably other stuff too.

So I thought I’m gonna use that “the_content” filter to replace that values with the corresponding brackets…and it turned out to work… Obviously wpml or cwicly are doing their stuff later on so it get’s recognized correctly.

You can forget the code in my previous post, that few lines here also seem to do the trick:

function replace_encoded_with_braces($content) {
    $content = str_replace('%7B', '{', $content);
    $content = str_replace('%7D', '}', $content);
    return $content;
}

add_filter('the_content', 'replace_encoded_with_braces', 1);

Cheers.

[Wolfgang]

One more update.
Template parts and Templates are not affected by the provided Filter, so I have added the "block_editor_content filter.

Im quite sure that now everything is covered, but maybe I’ll explore more

<?php 
function replace_encoded_with_braces($content) {
    $content = str_replace('%7B', '{', $content);
    $content = str_replace('%7D', '}', $content);
    return $content;
}


add_filter('the_content', 'replace_encoded_with_braces', 1);
add_filter('block_editor_content', 'replace_encoded_with_braces', 1);

[mannilito]

Thanks Wolfgang for sharing your WPML issues; I assume I have similar ones, in my case related to most of the links being formatted to strange %7D and similars (such as ACF field links, the new menu componenent, buttons). My setup is the same as yours and I wrote the support directly last week.
Reading through your issue, I hope it’s a bug from one of the latest updates/releases and we see some fix soon.

[Louis]

Hello @Wolfgang and @mannilito,

Thanks for the report and my apologies for the inconvenience this may be causing.
This is indeed an issue with WPML replacing Cwicly curly brackets used for dynamic data.

We’ll have a fix for this in the next update, as well as sending it to the WPML for a potential fix on their end.
It will require a new save on translated posts.

Cheers,

[Araminta]

Hi @Wolfgang,

Once again, thank you for taking the time to report this!

This should now be fixed with 1.3.4.7:

@Louis

Fix: WPML → rectify curly brackets replaced by WPML on translation save (translation re-save required)

Kindly let me know if this is the case on your end.

Thank you in advance.

[Wolfgang]

Hey @Araminta,

I didn’t have time to have a check if that bug is fixed, but I think with that fix a new bug occured.

Whenever a User with the role “shop-manager” (in my case, but i think it’s related if the user doesn’t have access to class and ids) edits content and saves a page, the relative style selector “>” get’s overwritten with “&gt ;”.

I thought that could be connected to that fix, that’s why I’m writing it here.

Cheers
Wolfgang

[Louis]

Hello @Wolfgang,

Thanks for bringing this up.

This is not related to this fix as we do not apply escaping to HTML characters in this particular setting.

Seems to be related to WooCommerce’s conception of shop-manager: Shop Manager cannot use HTML in product titles · Issue #25243 · woocommerce/woocommerce · GitHub

Currently, the only solution I can see fit for this is the following (only apply if your shop-manager user is trusted):

// Add custom capabilities to the 'shop_manager' role on admin initialization
add_action('admin_init', function () {

    // Get the 'shop_manager' role
    $role = get_role('shop_manager');

    // Add the 'unfiltered_html' capability to allow shop managers add HTML entities
    $role->add_cap('unfiltered_html');
    
});

Cheers,

[Wolfgang]

Hey @Louis ,

just got the information from my client, that the WPML fix doesn’t work, again → targeting Images. I’ve reactivated my script which does the job but it seems that there either something didn’t work after the fix and we didn’t recognize it, or something changed from the WPML side.

That site still running on Cwicly 1.3.4.7 and on WPML V4.6.8.

If you have some free time could you take a look at it again? It’s not very urgent since my PHP Script converts the tags correctly and it’s running fine.

Thanks in Advance!

Cheers
Wolfgang

[Louis]

Hello @Wolfgang,

Sorry to hear this.
I’ll try and take a look at this a bit later on one of our installations and report here.

I would highly recommend updating to the latest Cwicly version if possible.

Cheers,

[Wolfgang]

Hey Louis,

thanks for your fast response. And please take your time, as mentioned, for me it’s not urgent in a way!

I will update the site later this week to the latest version of WPML and Cwicly and let you know if anything changed, don’t have proper Backups set up there yet that’s why I didn’t update it yet. But that mentioned version was the Version where the fix was provided.

Cheers

[Wolfgang]

Hey @Louis,

now I was somehow forced to update the site . So I updated Cwicly to the latest 1.4.0.3 and also WPML to the latest version 4.6.9 (had 4.6.8 before) and it seems that the problem magically has resolved . Not sure if there were any further modifications to the described bug after 1.3.4.7 by you or if WPML changed something in that version 4.6.9… but I quickly deactivated the script to see if everything works and it seemed to work fine. There shouldn’t be anything in Cache either, so I’m pretty sure that the problem is fixed again!

Thanks as always for your responses!

Cheers
Wolfgang