Skip Navigation

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

Problem:
The client experienced formatting issues on their English website after replacing images on the German (default language) version using Cornerstone. The translated page displayed images incorrectly aligned and in different sizes, despite the German page appearing correctly.
Solution:
We recommended the following steps to resolve the issue:
1) Open the default language of your "Home" page and click on the pencil icon to access the translation editor.
2) Ensure that all translations are completed to 100%.
3) Return to the backend of the default language for that page and make any change in the Cornerstone editor to trigger a change in the secondary language, English.
4) More rows to edit will appear. Complete these new rows to 100%.
5) Once you save your changes, the rows will be identical 1:1.

If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, we 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. If further assistance is needed, please open a new support ticket at WPML support forum.

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.

No supporters are available to work today on this forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Tagged: 

This topic contains 8 replies, has 4 voices.

Last updated by Marcel 2 months, 1 week ago.

Assisted by: Marcel.

Author Posts
July 8, 2024 at 9:29 am #15911467

OfdW

Background of the issue:
Hello, we exchanged two images on our website (CMS is Cornerstone, we did this often before, original page is in German, translated page is in English) and afterwards the format of the translated website was messed up. Apparently, the copying process of the code is flawed. Our webdesigner found a manual solution, but not for all problems. I'd have to attach a foto of the bug: basically six fotos were shown in one row, when there were supposed to be two boxes with each three.

We'd rather not have to change the CSS code manually. Is there any way to exactly copy the code from the German page into the English page automatically? We've had the issue before, that the entire English page was disconnected - this didn't happen this time. Instead, the code was partially messed up.

Symptoms:
On the translated page, there are suddently format errors which we have never seen before: six fotos from employees were shown next to each other in different sizes. There should be three and three underneath each other (see German page).

In order for the page to not look completely unprofessional, our webdesigner found a manual solution for the images at least to be underneath each other. But the background is still flawed, the distances between images are uneven - of course the code should simply be copied.

Questions:
There must be a general bug within the copy process of the CSS code (in Cornerstone) into the translated version of the website. The errors are very random, we haven't seen them before and on the actual German page, everything looks good. The question is: what is this and how can we solve it?

July 8, 2024 at 7:27 pm #15915443

Mateus Getulio
Supporter

Languages: English (English ) Portuguese (Brazil) (Português )

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

Hello,

Thanks for contacting us.

Before your ticket is assigned to one of my colleagues, please allow me to walk you through some initial debugging steps. This will help speed up the support process.

Can you please check if the issue is the same as described in this errata?

If so, please try to follow the workaround:

- Back up your website files and database.
- Add this code snippet to your theme’s functions.php file:

function wpml_compsupp_5527_wpml_pb_copy_meta_field( $value, $translated_post_id, $original_post_id, $meta_key ) {
    if ( '_cornerstone_settings' === $meta_key ) {
        return WPML_PB_Handle_Custom_Fields::slash_json( get_post_meta( $translated_post_id, $meta_key, true ) );
    }
    return $value;
}
add_filter( 'wpml_pb_copy_meta_field', 'wpml_compsupp_5527_wpml_pb_copy_meta_field', 10, 4 );

Thank you, please let us know.
Mateus

July 11, 2024 at 11:36 am #15934703

OfdW

Dear Mateus,

Thank you for sending this suggestion. We tried this workaround but it didn't work.

We'd appreciate it if you could look into this again. Let me know if we can submit any more information on the issue.

July 11, 2024 at 12:38 pm #15935061

Andreas W.
Supporter

Languages: English (English ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

Did you try to update the original content and apply the translation again with the WPML Translation Editor after adding the workaround?

Best regards
Andreas

July 17, 2024 at 9:12 am #15965012

OfdW

Dear Andreas,

We had a look into your suggestion but we are not sure what is meant by WPML Translation Editor, i.e. how the translation can be applied with that. Could you give us more details on the exact path what we should do?

In the meantime, we had to add another row of images in Cornerstone as we got new team members. This again deleted our workaround (see the screenshots attached). Our web designer again went into the CSS code and applied some changes, but now still some fotos are stuck together, other are piled up, but at least not all fotos are in one row. That is completely unacceptable as it looks very unprofessional. The background is also confused on the English page, which is not visible in the foto as in concerns the lower part of the webpage. The problem has to be linked to WPML though as the German page looks completely fine.

Thanks a lot for looking into this.

Best, Hjördis

English Front Page_Original with workaround_still not okay.png
English Front Page_Original without workaround.png
German Front Page_How it should be_More Images.png
July 17, 2024 at 9:44 am #15965292

Andreas W.
Supporter

Languages: English (English ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

The WPML Translation Editor should make sure to keep the same layout and design in all languages.

The workaround, which my colleague suggested might not be suitable here, as it is intended for pages that should use different CSS settings per language.

Do you translate this content directly on Cornerstone or with the WPML Translation Editor?

I would like to offer to have a closer look at the problem and request temporary access (wp-admin and FTP) to the website to investigate this issue further.

You can find the required fields below the comment section when you log in to leave the next reply. The information you provide is private, which means only you and I can see and access it.

IMPORTANT
Please be sure to make a backup copy of the website and database before allowing us access.
If you can't see the wp-admin / FTP fields, your post and website credentials are set as PUBLIC. DO NOT publish the data unless you see the required wp-admin / FTP fields.

I may have to install a plugin called "All In One WP Migration" to make a copy of the website where I can investigate the issue further.

However, I would also be very grateful if you could provide a staging site or copy of the website from your server yourself for this purpose. This step would only be required if the issue is replicable on such a staging site.

If you have any questions about creating such a staging site, you can consult your hosting provider. Just take note that WPML should be registered on this site again.

If you are unable to provide such a copy of the site for testing, please let me know on this ticket.

The private response form looks like this:
hidden link

Next time you reply, click "I still need assistance."

Video:
hidden link

Please note that we are obliged to request this information individually on each ticket. We may not access any access information not specifically submitted on this ticket in the private response form.

July 22, 2024 at 12:17 pm #15986682

OfdW

Dear Andreas,

Thank you for your response. We are not using the WPML translation editor, but directly translate texts in Cornerstone (we don't have many Cornerstone pages and don't change content very often). However, this time it seems as if the code for the arrangement of the images is changed, it has nothing to do with the translation itself. Therefore, I'm not sure, if using the WPML translation editor would help or change anything at all. If you could send us a protocol, we would try out every step. But as you can see, all we did is add a new row of images and apparently the html code of the page is changed in the background without us being able to see it or change it. It must have something to do with the WPML-Cornerstone compatibility and it is a novel problem. We have rearranged images on that page many times and only now this problem arose.

Unfortunately, we can't provide the login data for our website and FTP for reasons of data protection. Creating the stacking page apparently is also a huge effort (the content is several GB large and also to my understanding, we'd have to buy the WPML plugin a second time).

Is there any other way we can provide individual data, such as screenshots of code which we could access and that would help to understand the problem?

Kind regards

July 22, 2024 at 2:15 pm #15987352

Marcel
Supporter

Languages: English (English ) German (Deutsch )

Timezone: Europe/Madrid (GMT+02:00)

Hi,

as my colleague Andreas is unavailable today, I will be taking over your ticket.

Try opening both pages directly in Cornerstone and compare the CSS from there. Are all the elements, including HTML IDs, identical?

If access to your site is not possible, you can easily create a duplicator package as described here. It only takes a few minutes, and you can use the built-in filters to exclude wp-content uploads or other files like backups and media to reduce file size.

If access to your site is not possible, you can easily create a duplicator package as described here: WPML Support Instructions. It only takes a few minutes, and you can use the built-in filters to exclude wp-content uploads or other files like backups and media to reduce file size.

If you need to remove sensitive information first, you can run a script on a staging version and create a copy from there: Removing Personal Information. No additional WPML license is needed for this step, as we deploy this locally.

Best Regards,
Marcel

July 25, 2024 at 4:37 pm #16004751

Marcel
Supporter

Languages: English (English ) German (Deutsch )

Timezone: Europe/Madrid (GMT+02:00)

Hi Hjördis,

thanks for the package. To solve the issue, please follow these steps:

1) Open the default language of your "Home" page and click on the pencil icon to access the translation editor.
2) Ensure that all translations are completed to 100%.
3) Return to the backend of the default language for that page and make any change in the Cornerstone editor to trigger a change in the secondary language, English.
4) More rows to edit will appear. Complete these new rows to 100%.
5) Once you save your changes, the rows will be identical 1:1. (screenshot attached from EN)

Best Regards,
Marcel

eng.PNG
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.