In modern web applications it is common to use custom HTML attributes like data-* which later can get parsed by Javascript. By default we do not translate non standard HTML attributes, since it may break the application. To be able to translate the attributes correctly we need to know which keys we may translate.
Note: This is only for paid plans of GTranslate.
Note: This article is written for technical persons. Please contact our live chat if you need help.
Let's say you have the following attributes on a div element which needs to be translated:
<div
class="slide"
data-title="Hello World"
data-subtitle="What a <b>wonderful</b> world!"
data-link="https://example.com/my-world/"
data-domain="example.com"
></div>
You need to specify the attributes to be translated in a new attribute called data-gt-translate-attributes. Like this:
<div
class="slide"
data-title="Hello world"
data-subtitle="What a <b>wonderful</b> world!"
data-link="https://example.com/my-world/"
data-domain="example.com"
data-gt-translate-attributes='["data-title", {"attribute":"data-subtitle", "format":"html"}, {"attribute":"data-link", "format":"url"}, {"attribute":"data-domain", "format":"domain"}]'
></div>
As you can see from this example, data-gt-translate-attributes should be in JSON format and it should be an array. It may simply specify the name of the attribute, value of which should be translated, or also specify the format of the value. Possible formats are html, html-urlencoded, json, json-urlencoded, json-base64, json-list, url, domain or text which is the default format if not specified.
After it is translated it will look like this:
<div
class="slide"
data-title="Привет мир"
data-subtitle="Что за <b>чудесный</b> мир!"
data-link="https://ru.example.com/мой-мир/"
data-domain="ru.example.com"
></div>