Non-Text Media Content

Supported Content Types

Image Files

Localize allows you to change images based on the current language within the Localize dashboard.
Read more here...

Audio Files

Localize allows you to change audio files based on the current language within the Localize dashboard.
Read more here...

Read how to enable this option here...

Unsupported Content Types

Video Files

Currently Localize does not support the localization of video files directly within the Localize dashboard.

Here's how we suggest you translate the content within your videos:

If possible, when creating videos with text, we recommend removing the text from the video itself, and adding it to the surrounding HTML.
Localize will then allow you to translate any text that is related to the video.
If you're unable to decouple the text from your videos and/or if the audio in your video is in the target language, you can manually create multiple translated versions of your videos and display the correct version using Javascript or CSS, as detailed below.

PDF Files

Currently, Localize does not support the localization of PDF files directly within the Localize dashboard.

As a workaround, you can manually create multiple translated versions of your PDFs and display the correct version using Javascript or CSS, as detailed below.

Embedded Links

If you would like to change the URL for an embedded link in your web page, see the sample source code below.

Methods to Handle Unsupported Content Types

Swap Videos Using JavaScript

Localize fires a setLanguage event when the language of the page is changed. You can set up this event listener and change which media file will be used, based on the new language.

Here's an example that swaps a single Vimeo video file on the page:

Localize.on('setLanguage', function(data) {
  console.log(data) // { from: 'en', to: 'fr' }
  // ...add code here to swap specific media files in the current page
  // The following example swaps a single video file on the page.
  swapVideos(data.to);
});

// Swap Vimeo video files based on the currently selected language.
function swapVideos(newLanguage) {
  var video1 = document.getElementById("video1");
  switch (newLanguage) {
    case 'fr':
      video1.src = "https://player.vimeo.com/video/361492808?badge=0&autopause=0&player_id=0&app_id=58479";
      video1.title = "Éditeur en contexte";
      break;
    case 'en':
    default:
      video1.src = "https://player.vimeo.com/video/212825242?badge=0&autopause=0&player_id=0&app_id=58479";
      video1.title = "In-Context Editor";
      break;
  }
}

...and here's the HTML for the video file swapping example code above:

<div>
    The following Vimeo video can be shown in both English and French, using the embedded Javascript in this page:
  </div>
  <div style="padding:56.25% 0 0 0;position:relative;">
    <iframe id="video1" src="https://player.vimeo.com/video/212825242?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:80%;height:80%;" title="In-Context Editor"></iframe>
  </div>
  <script src="https://player.vimeo.com/api/player.js"></script>

Check out our Frontend API documentation for more details.

Swap URLs Using JavaScript

Localize fires a setLanguage event when the language of the page is changed. You can set up this event listener and change which URL will be used for a link in your web page, based on the new language.

Here's an example that swaps URLs for links on the page:

Localize.on('setLanguage', function(data) {
        console.log(data) // { from: 'en', to: 'fr' }
        swapURLs(data.to);
      });

      // Swap URLs based on the currently selected language.
      function swapURLs(newLanguage) {
        var apple_watch_5 = document.getElementById("apple-watch-5");
        var fitbit_surge = document.getElementById("fitbit-surge");
        var fossil_gen_4 = document.getElementById("fossil-gen-4");
        
        switch (newLanguage) {
          case 'es':
            apple_watch_5.href = "https://localizemerch.com/es/products/apple-watch-series-5";
            fitbit_surge.href = "https://localizemerch.com/es/products/fitbit-surge";
            fossil_gen_4.href = "https://localizemerch.com/es/products/fossil-gen-4";
            break;
          case 'en':
          default:
            apple_watch_5.href = "https://localizemerch.com/products/apple-watch-series-5";
            fitbit_surge.href = "https://localizemerch.com/products/fitbit-surge";
            fossil_gen_4.href = "https://localizemerch.com/products/fossil-gen-4";
            break;
        }
      }

...and here's the HTML for the URL swapping example code above:

<div>
    Pretend to buy one of these (ficticious) products on our LocalizeMerch demo site:
    <ul>
      <li><a href="https://localizemerch.com/products/apple-watch-series-5" id="apple-watch-5" target="_blank">Apple Watch Series 5</a></li>
      <li><a href="https://localizemerch.com/products/fitbit-surge" id="fitbit-surge" target="_blank">Fitbit Surge</a></li>
      <li><a href="https://localizemerch.com/products/fossil-gen-4" id="fossil-gen-4" target="_blank">Fossil Gen 4
</a></li>
    </ul>
  </div>

CSS

Localize ensures the lang attribute of the <html> element is always kept up-to-date.

This can be used to apply language-specific CSS rules, as in the following example:

html[lang=en] {
  // CSS rules for English
}
html[lang=fr] {
  // CSS rules for French
}