Translate image inside sag

  • Resolved margr

    (@mar1984)


    1 year, 5 months ago

    Hello there,

    I have an image inside an SVG so I can click on logos inside the image that open external urls, there is also hover animation of each <rect>.

    I would like to put the version of this image in English, but when I translate the page it is not available in TranslatePress to change it. I have the English image uploaded to the media library.

    If it doesn’t come out automatically, is there any way through classes, code… to do it? I have no problem developing it if you tell me the steps to follow.

    This is the code of my svg:

    <svg viewBox="0 0 1200 1024" width="1200" id="Cam1" class="svg_img_link">

      <image x="0" y="0" width="100%" height="100%" id="imgCam" alt="Cámaras" title="Cámaras"  role="img" ><title>Cámaras</title></image>

      <rect x="980" y="38" width="190" height="60" alt="LiNK" title="LINK" onclick="window.open('https://www.external_link.com', '_blank')" fill="rgba(255,255,255,0)" stroke-miterlimit="10"><title> EXTERNAL LINK </title></rect>

</svg>

    Thank you very much in advance.

    Best regards.

    • This topic was modified 1 year, 5 months ago by margr.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter margr

    (@mar1984)

    Hi again,

    Sorry for my mistake in the title, word “sag” is SVG.

    I found in the documentation how to operate with shortcodes and I think that for now it will be the solution that I am going to apply. I write it here in case it is useful to someone else:

    [trp_language language=”en_US”]
    <?img src=“URL_to_image.extension“ />
    [/trp_language]

    https://translatepress.com/docs/restrict-by-language/translation-shortcode/

    If there is any other better option, please tell me, meanwhile I leave the thread closed as resolved.

    Regards.

    • This reply was modified 1 year, 5 months ago by margr. Reason: correction
    • This reply was modified 1 year, 5 months ago by margr. Reason: correction
    Plugin Support Alex

    (@alexcozmoslabs)

    Hi,

    There is support for translating images inserted through <img> tag in HTML.
    The conditional approach is the recommended one in your case. 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/.

    Thread Starter margr

    (@mar1984)

    Thanks, in my case I don’t use Elementor. And although my image is in the media library, I don’t insert it from any Gutenberg block, but through the HTML code that I wrote above, since I need to “draw” about it and apply links, a kind of image map but different, since I need to “draw” on top of the image and apply links, a kind of image map but different. I don’t use the tag <img>, I use tag <svg> and inside it <image>.

    Thank you for your recommendations. I am having doubts for the change of some links that I have added by code, but first I want to study the documentation well. If I can’t do it, I’ll consult you.

    Regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Translate image inside sag’ is closed to new replies.