Skip to main content

Default Translations

The Participaite Translate Plugin provides two ways to define default translations:

  1. HTML Attributes: Using the data-ptp-translations attribute on individual HTML elements
  2. Configuration: Using the defaultTranslations property in the plugin configuration

Both methods are useful for overriding automatic translation for specific text sections.

Method 1: HTML Attributes​

You can define default translations for any HTML element using the data-ptp-translations attribute. This is particularly useful when you want to override the automatic translation for specific text sections.

Basic Usage​

Add the data-ptp-translations attribute to any HTML element containing the text you want to translate. The attribute value should be a JSON object with language codes as keys and translations as values.

Syntax:

<element data-ptp-translations='{"languageCode": "translation", ...}'>
  Original text
</element>

Examples​

<nav>
  <ul>
    <li>
      <a
        href="/products"
        data-ptp-translations='{
        "en": "Products",
        "fr": "Produits",
        "es": "Productos"
      }'
        >Produkte</a
      >
    </li>
    <li>
      <a
        href="/contact"
        data-ptp-translations='{
        "en": "Contact us",
        "fr": "Contactez-nous",
        "es": "Contáctenos"
      }'
        >Kontaktieren Sie uns</a
      >
    </li>
  </ul>
</nav>

Call-to-Action Elements​

<div class="cta-section">
  <h2 data-ptp-translations='{
    "en": "Start your free trial today!",
    "fr": "Commencez votre essai gratuit aujourd'hui !",
    "es": "¡Comience su prueba gratuita hoy!"
  }'>Starten Sie heute Ihre kostenlose Testversion!</h2>

  <button data-ptp-translations='{
    "en": "Get Started",
    "fr": "Commencer",
    "es": "Empezar"
  }'>Jetzt loslegen</button>
</div>

Method 2: Configuration​

You can also define default translations globally in your plugin configuration using the defaultTranslations property. This method is useful for translations that apply across your entire website.

Configuration Structure​

window.PTP_TRANSLATE_CONFIG = {
  translator: {
    sourceLang: "de",
    targetLangs: [{ code: "en" }, { code: "fr" }],
    defaultTranslations: {
      "en": {
        "Willkommen": "Welcome",
        "Kontakt": "Contact",
        "Über uns": "About us"
      },
      "fr": {
        "Willkommen": "Bienvenue",
        "Kontakt": "Contact", 
        "Über uns": "À propos"
      }
    }
  }
};

How It Works​

  • The defaultTranslations object maps language codes to translation dictionaries
  • Each translation dictionary maps source text to target text
  • These translations are applied automatically when the source text is found
  • Configuration translations have lower priority than data-ptp-translations attributes

When to Use Each Method​

  • HTML Attributes (data-ptp-translations): Use for element-specific translations that need fine control
  • Configuration (defaultTranslations): Use for common translations that appear across multiple pages

Best Practices​

  1. Valid JSON Format: Ensure your translations are formatted as valid JSON. This means:

    • Use double quotes for keys and values
    • No trailing commas
    • Proper escaping of special characters

  2. Consistency: Keep your translations consistent across similar elements. Consider maintaining a translation glossary for commonly used terms.

  3. Maintenance: Group related translations together in your HTML to make maintenance easier.

  • See Configuration for setting up the plugin's source and target languages.
  • See Installation for basic setup instructions.
  • Check Overview to understand how the plugin works with your content.

Technical Notes​

  • The data-ptp-translations attribute takes precedence over automatic translation.
  • Missing translations for a target language will fall back to automatic translation.
  • Make sure your JSON is valid - invalid JSON will cause the translations to be ignored.

Troubleshooting​

  • Translations not working: Verify that your JSON is valid. You can use a JSON validator to check the syntax.
  • Partial translations: If some languages are not showing up, check that you've included translations for all target languages defined in your configuration.
  • Special characters: Make sure special characters are properly escaped in your JSON.