[Resolved] How change page hero Elements text for pages with different languages

[nordicsouth]

Hi, I just started trying to use Elements, just a simple “hero” image on the front page sitting right under the navigation. And on top of the background image is a short text in my native language. Working fine.

But my site is multilingual. When I change to the front page in my other languages it is (of course) the same image and same words.
I guess (?) I will have to make separate Hero images with different texts in language 1, 2, 3… and show them on the right frontpage for every language.
How??

I can not see how to choose only-show-this-Element-to-frontpage-language-1.
Or if it should be hide-this-Element-from-front-page-language-2,3,4.
Or?

(Easiest is of course to not add any words, but then it becomes meaningless to just show a big image.)

I use Polylang plugin.

[nordicsouth]

Hi again, googled a lot and tested some more and found I had missed something obvious (but not obvious enough): Since “Frontpage” was the first (and only) location I tried under Display rules I did not see that if you instead choose “Page” a second box will show up where you can choose exactly what page to show or hide the Element on. (I was very confused how to add an element to an exact page, but now I understand that. I think that second box should be visible all the time in some way, maybe greyed out when not active. That would make it clearer.)
Fine, that is a different problem solved for me.

BUT! There still is a problem with Frontpage.

If I choose “Frontpage” under Display rules, as I said it will show the same Element on all four language frontpages. That is not working for me.

Now I see that if I choose Page instead, there is an option to pinpoint the Element to just page “Home english” or “Home deutch” or just my regular “Home”. Only problem is it is not working! The Hero Element is not shown on any of the language home pages.
But if I choose a normal page, say the “About page”, in one or another language, it is working fine. So why is “Home” not working?? Is it something special about frontpage/home page? What am I missing?

I use a “static” home page and Start page is set to “Home” under my WP Reading settings.
Everything else about languages is working fine so far.

[Tom]

Hi there,

Thanks for the feedback!

I wonder if the method this user would help?: https://generatepress.com/forums/topic/display-rule-conflict-for-front-page-using-polylang/#post-681602

If not, we can use a filter to display a different header element based on language. For example: https://generatepress.com/forums/topic/bug-elements-and-display-rules-and-wpml-wpml-global-locations-bug-ongoing/#post-662746

[nordicsouth]

Hi sorry for late reply.

Refreshing memory:
If I choose “Frontpage” there is no way to choose only Frontpage in English, or only Frontpage in Deutch. The same hero-header will show on both.
If I choose “Page: Home english” or “Page: Home deutch” it doesn´t show at all (why? because Home is not a “page”, but a “static page”??)

The first method you wrote is for sure a workaround to avoid the problem, but almost like not using a element hero header… Useful if I need the logo on top of a slider or other content. (But almost better to ignore hero-header totally, and use Sections on my Frontpage instead. And put a full width image with text incorporated in the jpg. Use different images for every language with text in the right language and add different images to the english frontpage, deutch frontpage and so on.
But that image with the text will shrink very much on smaller screens and not behave in a modern background-image-way. And I can not add buttons and what-else on top of the image like I easily can in a hero-header. So I don´t like that, but have used it in the past as a work-around.)

Second method with hooks I have not tested (yet).
But as I understand this multi-language-problem is actually not a bug but something that is missing in Elements. And it will take a lot of coding to make it work?
But I too think it is important! Please fix! 🙂

I WOULD like Elements to work in the same easy way as “Content aware sidebars”: When I choose the display rule “Static page: Frontpage” I can also choose “AND: Language (!!): Deutch”
Done!
That sidebar will only be visible on Frontpage that is German. Not on English. So easy! (for me that is, maybe not for you to code…?)

I have found what seems to be another workaround in the mean-time:
Polylang suggests to add a file that WPML have had for years to fix similar problems. That wpml-config.xml will make a language STRING appear in Polylangs Settings -> Languages -> Strings translations

Code could look like this, but key names are only examples (Taken from here: https://polylang.pro/a-multilingual-custom-header-image/)

<wpml-config>
  <admin-texts>
    <key name='theme_mods_twentytwelve'>
      <key name='header_image' />
    </key>
  </admin-texts>
</wpml-config>

Do you believe this is a good solution?
I need to change the Key name to generatepress, instead of twentytwelve.
But what key name will target your hero-header??
So in Polylang strings I can see it and choose to automatically replace my english hero-header with my deutch hero-header, when on that page.?

More to see here:
Full WPML-code: https://polylang.pro/doc/the-wpml-config-xml-file/
Special for Child theme: https://polylang.pro/doc/my-theme-provides-a-wpml-config-xml-but-nothing-appears-in-the-strings-translation-table/
Custom Post types: https://polylang.pro/doc/multilingual-custom-post-types-and-taxonomies/
Strings translation: https://polylang.pro/doc/strings-translation/

[Tom]

It’s definitely not easy to code, but it is something we intend on improving.

I don’t believe a wpml-config.xml file is a solution here. That file is mainly for theme settings, whereas Elements are a custom post type which should be translated by default.

As of right now, I think the filter function I mentioned is the way forward: https://generatepress.com/forums/topic/bug-elements-and-display-rules-and-wpml-wpml-global-locations-bug-ongoing/#post-662746

That will solve the front page issue until we come up with a non-coding solution 🙂

[nordicsouth]

Ok, downloaded Code Snippets and will try this. Really not my comfort zone.
Just two thoughts, about the code:

add_filter( 'generate_header_element_display', function( $display, $element_id ) {
    if ( is_front_page() ) {
        // Target our German Header Element with the ID: 10
        if ( 10 === $element_id ) {
            if ( 'de_DE' === get_locale() ) {
                return true;
            } else {
                return false;
            }
        }

        // Target our English Header Element with the ID: 20
        if ( 20 === $element_id ) {
            if ( 'de_DE' !== get_locale() ) {
                return true;
            } else {
                return false;
            }
        }
    }

    return $display;
}, 10, 2 );

Super PHP-beginner question:
In Code snippets it is already a <?php at the start.
Should I end your suggested code with <?php } );, is that something that always ends php in code snippets (it is not in your code, but all examples in the plugin does end like that)

In the code it says 'de_DE' on both places, if that refers to german (DE), should not one of them be en_EN instead? Or have I misunderstood? In my site I do have one default language and three others, no problem to put them all after each other in the same code above?

[nordicsouth]

And what does 10 and 2 in the end refer to, is it something I must change (an ID or something), or is it just like that.

[nordicsouth]

Oh sorry, now I see the little differens: === versus !==
So de_DE was right in both places.

Should I do one hook for each language? Or combine them?

[Tom]

You can do multiple hooks if you find it easier to read – totally up to you.

The 10 and 2 at the end is the priority and how many parameters are being passed – no need to touch that.

You only need to update element ID (10) and the language code (depending on which language you’re targeting).

[nordicsouth]

It worked like a charm! (Well it wasn´t very easy, but I did it!)

I made one snippet where I first target our native language, and if not native language show english header instead. That way all but our native frontpage will see the english version. And that could be okay.
But I did one more to target the deutch frontpage, and if not german show get_locale (english) instead.
The fourth language on our site does not have it´s own, so will see the english version.

Solved.

I guess most sites use a page builder if they need more advanced headers, so I understand if it not top priority to fix this. And this solution was alright. Happy.

[Tom]

We’re looking into an easier way to accomplish this in the future.

Glad you got it working 🙂

[Tom]

I had the same problem: Language specific front page header for English and German.
Your suggested solution using a filter function worked (with Code Snippets plugin).
Thank you 🙂

[Tom]

Great to hear! 🙂

[Peter]

Hi Tom,

I seem to have the same issue as described above, and wondering if you have an out-of-the-box solution high on your list or other priorities?

Many thanks, Peter

[Tom]

Hi there,

We’re working with WPML right now to make Elements more compatible out-of-the-box in GPP 1.8, which will be available for public testing this week.

[Author]

Posts