Skip to Content

Contributors

"Translating" pictures in website breaks website editor - any workaround?

Hello everyone,

sorry for non-development question but this is really so specific I cannot imagine anyone besides experts here would be able to answer.

A client has a website where on few pages there is a picture that needs to be different for different language version (because it contains embedded text in that language). The way we came out to deal with this is adding something like <t t-set="image_url" t-value="url_of_the_picture_in_default_language"/> before the image itself and then in the image itself something like <img t-att-href="image_url"/>

This way the URL value can be translated to other languages. While it works as planned unfortunately it breaks the website editor - some JS error appears and the component palette won't be loaded :-(

I have a stupid feeling I am missing some other obvious option. Any ideas please?

Best regards

	Radovan Skolnik



by Radovan Skolnik - 07:15 - 19 Dec 2023

Follow-Ups

  • Re: "Translating" pictures in website breaks website editor - any workaround?
    > Yes! That's exactly that option that made me feel stupid in the back of my
    
    > head...
    
    > Not optimal in my opinion but better than nothing.
    
    under the hood this sets the html lang attribute [1] of the element, that's 
    pretty optimal in the html sense of things in my opinion.
    
    I guess you don't want to have users in the editor have to put in all 
    translated img's there? Then I'd suggest to have the users follow a naming 
    scheme for those images, if en_US is the base language, it's
    /images/en_US/${some_name}.png
    and in
    https://github.com/OCA/OCB/blob/17.0/odoo/addons/base/models/ir_qweb.py#L562
    you check the current language, if it's not en_US you go and search for
    //img[starts-with(@src, '/images/en_US/')]
    and replace that with
    /images/${language}/${some_name}.png
    
    Or do the same thing on the client side with JS.
    Or generate CSS replacement rules where you hide the en_US image and put the 
    $language image there instead.
    
    I assume you've already considered using one SVG and do the text part there 
    where you can also set a lang attribute? Not feasible for a lot of things, but 
    if you generate those images automatically anyways, that might be the way.
    
    [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
    
    
    -- 
    Your partner for the hard Odoo problems
    https://hunki-enterprises.com

    by Holger Brunn - 04:01 - 20 Dec 2023
  • Re: "Translating" pictures in website breaks website editor - any workaround?
    Yes! That's exactly that option that made me feel stupid in the back of my 
    head...
    
    Not optimal in my opinion but better than nothing.
    
    Thank you Julien. Best regards
    
    	Radovan
    
    On utorok 19. decembra 2023 19:37:19 CET Julien Guenat wrote:
    
    > Hello,
    
    > 
    
    > In Odoo 16 (and maybe before, didn't test) you have a "Visibility"
    
    > option on website building blocks (image, image-text ...) where you
    
    > can choose to make the block visible only for specific languages.
    
    > 
    
    > If not available in your Odoo version I guess you could use some
    
    > t-if.
    
    > 
    
    > Best regards,
    
    > 
    
    > Julien
    
    > 
    
    > Le 19.12.23 à 19:17, Radovan Skolnik a
    
    > écrit :
    
    > 
    
    > 
    
    > Hello everyone,
    
    > sorry for non-development question but this is really so specific I cannot
    
    > imagine anyone besides experts here would be able to answer. A client has a
    
    > website where on few pages there is a picture that needs to be different
    
    > for different language version (because it contains embedded text in that
    
    > language). The way we came out to deal with this is adding something like
    
    > <t t-set="image_url" t-value="url_of_the_picture_in_default_language"/>
    
    > before the image itself and then in the image itself something like <img
    
    > t-att-href="image_url"/> This way the URL value can be translated to other
    
    > languages. While it works as planned unfortunately it breaks the website
    
    > editor - some JS error appears and the component palette won't be loaded
    
    > :-( I have a stupid feeling I am missing some other obvious option. Any
    
    > ideas please? Best regards
    
    > Radovan Skolnik
    
    > 
    
    > 
    
    > _______________________________________________
    
    > Mailing-List: https://odoo-community.org/groups/contributors-15 [1]
    
    > Post to: mailto:contributors@odoo-community.org [2]
    
    > Unsubscribe: https://odoo-community.org/groups?unsubscribe [3]
    
    > 
    
    > 
    
    > 
    
    > 
    
    > _______________________________________________
    
    > Mailing-List: https://odoo-community.org/groups/contributors-15 [4]
    
    > Post to: mailto:contributors@odoo-community.org
    
    > Unsubscribe: https://odoo-community.org/groups?unsubscribe [5]
    
    > 
    
    > 
    
    > 
    
    > [1] https://odoo-community.org/groups/contributors-15
    
    > [2] mailto:contributors@odoo-community.org
    
    > [3] https://odoo-community.org/groups?unsubscribe
    
    > [4] https://odoo-community.org/groups/contributors-15
    
    > [5] https://odoo-community.org/groups?unsubscribe
    
    
    
    
    

    by Radovan Skolnik - 07:46 - 19 Dec 2023
  • Re: "Translating" pictures in website breaks website editor - any workaround?
    Hello,

    In Odoo 16 (and maybe before, didn't test) you have a "Visibility" option on website building blocks (image, image-text ...) where you can choose to make the block visible only for specific languages.

    If not available in your Odoo version I guess you could use some t-if.

    Best regards,

    Julien

    Le 19.12.23 à 19:17, Radovan Skolnik a écrit :
    Hello everyone,
    
    sorry for non-development question but this is really so specific I cannot imagine anyone besides experts here would be able to answer.
    
    A client has a website where on few pages there is a picture that needs to be different for different language version (because it contains embedded text in that language). The way we came out to deal with this is adding something like <t t-set="image_url" t-value="url_of_the_picture_in_default_language"/> before the image itself and then in the image itself something like <img t-att-href="image_url"/>
    
    This way the URL value can be translated to other languages. While it works as planned unfortunately it breaks the website editor - some JS error appears and the component palette won't be loaded :-(
    
    I have a stupid feeling I am missing some other obvious option. Any ideas please?
    
    Best regards
    
    	Radovan Skolnik
    
    
    

    _______________________________________________
    Mailing-List: https://odoo-community.org/groups/contributors-15
    Post to: mailto:contributors@odoo-community.org
    Unsubscribe: https://odoo-community.org/groups?unsubscribe



    by julien - 07:36 - 19 Dec 2023