Multi-language localisation

You can change the language used for any text in your images, spins, videos and galleries.

You can also change the images, videos and spins themselves. This page explains how.

Choose the text for images, spins, videos

Text is used to help users know how to interact with your assets. Text is shown in messages and buttons on your images, 360 spins, videos and 3D models.

You can modify the default text either with a script or by setting data-options inside the div.

This example changes the text for image zoom and 360 spins to the French language:

<script>
var SirvOptions = {
  viewer: {
    zoom: {
      hint: {
        text: {
          click: 'Cliquez pour zoomer',
          hover: 'Survolez pour zoomer',
          dblclick: 'Double-cliquez pour zoomer'
        }
      }
    },
    spin: {
      hint: {
        message: {
          text: 'Glisser pour faire pivoter'
        }
      }
    }
  }
}
</script>

<div class="Sirv" data-options="zoom.hint.text.click:Cliquez pour zoomer; zoom.hint.text.hover:Survolez pour zoomer; zoom.hint.text.dblclick:Double-cliquez pour zoomer; spin.hint.message.text:Glisser pour faire pivoter">
  <div data-src="https://demo.sirv.com/demo/snug/grey.spin"></div>
  <div data-src="https://demo.sirv.com/demo/snug/pink-b-living.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/snug/blue-b-neon.jpg" data-type="zoom"></div>
</div>

The gallery with French text will look like this:

Multiple languages

To show text in many different language versions of your web page, you should write a script to automatically show the correct language. The best way to do this depends on the structure of your website.

A simple example for 2 languages - English en and French fr - is shown below. You should write an appropriate script to obtain the [currentLanguage] of the visitor.

<script>
// Define localized texts
var smvLocalization = {
  en: {
    spinHint: 'Drag to spin',
  },

  fr: {
    spinHint: 'Glisser pour faire tourner'
  }
};

// Use texts that correspond to the current language
var SirvOptions = {
  viewer: {
    spin: {
      hint: {
        message: {
          text: smvLocalization[currentLanguage].spinHint
        }
      }
    }
  }
}
</script>

Change language based on domain name

If your website uses different domains for language-specific versions, you can display a different language text. For example, your domain names might be:

• my-website.com (English)
• my-website.fr (French)

The script below will display appropriate text for the 360 spin, determined by the .com or .fr in the domain name:

<script>
function getFileExtension(filename) {
  let ext = "default";

  if (!!filename) {
    ext = filename.split(".").pop() || "default";
  }

  if (ext === "com") {
    ext = "default";
  }

  return ext;
}

const url = window.location.href;
const urlData = new URL(url);
const domain = urlData.hostname;
const currentLanguage = getFileExtension(domain);

var smvLocalization = {
  default: {
    spinHint: "Drag to spin",
  },

  fr: {
    spinHint: "Glisser pour faire tourner",
  },
};

// Use texts that correspond the current language
var SirvOptions = {
  viewer: {
    spin: {
      hint: {
        message: {
          text: smvLocalization[currentLanguage].spinHint,
        },
      },
    },
  },
};
</script>

Show different assets based on URL

You can also change the images and videos on your web page, depending on the language.

The following example uses a single smart gallery containing both Englsh and French images. Look at the original smart gallery and you will see all the assets:

https://demo.sirv.com/demo/sirv-media-viewer/homehardware/products/1031xxx.view

A script can be added to the web page to filter-out files containing either -en or -fr in their filename. The French page contains /fr/ in its URL, so the script removes the English file named stanley-22oz-antivibe-fatmax-EN.jpg. The English page contains /en/ in its URL, so the script removes the file named stanley-22oz-antivibe-fatmax-FR.jpg. Visit the English and French pages below - they both use the same script, yet the gallery images are filtered differently, according to the web page URL:

English web page:
https://demo.sirv.com/demo/sirv-media-viewer/homehardware/en/smv-smart-gallery-filter-by-language.html

French web page:
https://demo.sirv.com/demo/sirv-media-viewer/homehardware/fr/smv-smart-gallery-filter-by-language.html

Below is the script used to filter the gallery items. It identifies the language in the URL (en or fr), then filters the gallery items to remove files named with the unwanted language:

<script>
// Define supported languages
var SMV_SUPPORTED_LANGUAGES = ['en', 'fr'];

// Define default language
var SMV_DEFAULT_LANGUAGE = 'en';

// Get current language from the URL
function smvGetPageLanguage() {
  var reCurLang = new RegExp('\/(' + SMV_SUPPORTED_LANGUAGES.join('|') + ')\/', 'i');
  var matches = document.location.pathname.match(reCurLang);
  if (matches) {
    return matches[1];
  }
  return SMV_DEFAULT_LANGUAGE;
}

// Set current langugage based on the URL
var smvCurrentLang = smvGetPageLanguage();
function smvGalleryFilterItemsByLang(viewerId, items) {
  var excludedLanguages = SMV_SUPPORTED_LANGUAGES.filter(function(lang) { return lang !== smvCurrentLang });
  var re = new RegExp('\-(' + excludedLanguages.join('|') + ')\.[a-zA-z\.d]+?', 'i');
  return items.filter(function(item) {
    return !re.test(item.url);
  });
}
</script>

Request help

If you need help with multi-language usage of Sirv Media Viewer, please contact the Sirv customer success team.