Translate “srcset” attribute inside picture element

  • Resolved victorfs88

    (@victorfs88)


    3 years, 5 months ago

    I use the <picture> element to make my homepage main banner responsive to the screen size. When the user is using mobile, a narrow version of the banner is loaded. When the user uses desktop, a wide version is loaded. Those banners have text on them, so the images need to be translated.

    Example below:

    <picture>
 <source srcset="banner-wide.png" media="(min-width: 600px)">
 <img src="banner-narrow.png" alt="MDN">
</picture>

    The problem is that I am unable to translate the <source> element (give a different image to the srcset attribute). I can only translate the <img> element. How can I solve this issue?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Anghel Emanuel

    (@anghelemanuel99)

    Hello there,

    Thank you for letting us know about your problem!

    At the moment we don`t have support for <source srcset> but we want to know how did you generate that <picture>. Did you use a plugin for this or did you write it in HTML?

    What we can recommend is a Conditional Shortcode as a workaround.

    You can use our Conditional Shortcode Based On Language to display different content for different languages https://translatepress.com/docs/translation-shortcode/, or if your website is built with Elementor, you can restrict the modules based on language using our Restrict by Language integration: https://translatepress.com/docs/restrict-by-language/elementor-integration/.
    Also, we have similar integrations with Oxygen Builder, https://translatepress.com/docs/restrict-by-language/oxygen-builder-integration/, and WP Bakery, https://translatepress.com/docs/restrict-by-language/wpbackery-integration/.

    Please let me know about this!

    Kind Regards,

    Thread Starter victorfs88

    (@victorfs88)

    Hello Anghel! Thank you for your support!

    I was able to solve the problem following your suggestion using the conditional shortcode based on language. I will try to further explain and answer your questions below:

    My website was built by a third party site building company. They did not use Elementor, Oxygen or any other site building plugin. Instead, they used their own custom theme and applied all changes using HTML, CSS and PHP directly editing the theme. Advanced Custom Fields plugin was used to help us (website admins) to manage content in an easy way, without the need to directly edit the theme or hard-coded strings. The banner images were chosen in the custom field in the Home page. There was one field for desktop image and one for mobile image

    Now back to the issue described in this post: What I did was create two extra custom fields, one for English desktop image and other for English mobile image. I manually edited my home.php page of the theme in a way that before the <picture> element, I use $current_language = get_locale(); to check the language. If it is in English, the English version of the images URL are loaded, if not, the Portuguese version of the images URL are loaded. Then, the <picture> element that follows remains the same as before, it just uses the image URLs previously selected based on language, one for mobile and one for desktop.

    Thank you again for your support! In future TranslatePress updates, it would be nice if we could simply translate the <picture> element as a whole directly using the visual “Translate Page” interface, being able to translate both the <img src=> and the <source srcset=> inside.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Translate “srcset” attribute inside picture element’ is closed to new replies.