Oqtane Tutorials
Oqtane Tutorials

Multi-Language Tutorial

Tutorial Home › Languages
Best practices using the Image Service
#1 Going all Multilanguage / i18n
Template Service Tutorials
Requirements
Resources

Going all Multilanguage / i18n

Everything in 2sxc is multi-language right from the start. It's important to understand that every field in 2sxc can be translated or not - and the lookup happens automatically. So the following examples will automatically show the correct value based on the language you're on.

There are two important types of multi-language:

  1. Multi-Language Resources - like messages / button labels etc.
  2. Multi-Language Content - things the content editor will work with

If you installed the Tutorial App on your system these examples may not work. That's because Dnn / 2sxc must be have DE and EN activated before installing the tutorial app. Otherwise it will only import the EN data and not import the DE data.

The samples can differ based on your Razor base class or if you're running an old version.
Selected: Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)

Multi-Language (i18n) Resources

These are configured in the App Resources or in the global resources.

⬇️ Result | Source ➡️

  1. The Greeting Text:

    Welcome to the Tutorial App!

    This is the English greeting 😉!

  2. A button: 
@inherits Custom.Hybrid.RazorTyped
<ol>
  <li>The Greeting Text: <br>
    @App.Resources.Html("Greeting")
  </li>
  <li>
    A button:
    <button type="button">@App.Resources.String("ButtonOrder")</button>
  </li>
</ol>

Multi-Language (i18n) Content

The editor can edit anything and choose which field to translate. In the following example, only one book is translated - and even the cover-image is translated.

⬇️ Result | Source ➡️

  • Hitchhikers Guide to the Galaxy
    Seconds before the Earth is demolished to make way for a galactic freeway, Arthur Dent is plucked…
  • Good Omens
    The Nice and Accurate Prophecies of Agnes Nutter, Witch is a World Fantasy Award-nominated novel…
  • Phishing for Phools
    Markets are full of manipulative traps, and we can all be easily coerced into spending money to our…
  • The Last Continent
    Ane awesome parody of Australians. 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade
@{
  // Resize settings for the cover images
  var flatSettings = Kit.Image.Settings(width: 100, height: 300, resizeMode: "max", scaleMode: "both");
}
<ul>
  @foreach (var book in AsItems(App.Data.GetStream("Books"))) {
    <li class="mb-4">
      <div style="overflow: auto">
        @if (book.IsNotEmpty("Cover")) {
          @book.Picture("Cover", settings: flatSettings, imgClass: "float-start pe-4")
        }
        <strong>@book.Title</strong> <br>
        @Text.Ellipsis(book.String("Teaser"), 100, suffix: "…")
      </div>
    </li>
  }
</ul>

 

 

Best practices using the Image Service
#1 Going all Multilanguage / i18n
Template Service Tutorials