Skip to main content
Home  › ... 2sxc Apps

Language Tutorials

Tutorial Home

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.

Multi-Language (i18n) Resources

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

  1. The Greeting Text:

    Welcome to the Tutorial App!

    This is the English greeting 😉!

  2. A button:

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.

  • Hitchhikers Guide to the Galaxy


    Seconds before the Earth is demolished to make way for a galactic freeway, Arthur Dent is plucked off the planet by his friend Ford Prefect, a researcher for the revised edition of The Hitchhiker's Guide to the Galaxy who, for the last 15 years, has been posing as an out-of-work actor. Together this dynamic pair begin a journey through space aided by quotes from The Hitchhiker's Guide ("A towel is about the most massively useful thing an interstellar hitchhiker can have.") and a galaxy full of fellow travelers: Zaphod Beeblebrox, the two-headed, three-armed ex-hippie and totally out-to-lunch president of the galaxy; Trillian, Zaphod's girlfriend (formally Tricia McMillan), whom Arthur tried to pick up at a cocktail party once upon a time zone; Marvin, a paranoid, brilliant, and chronically depressed robot; and Veet Voojagig, a former graduate student who is obsessed with the disappearance of all the ballpoint pens he bought over the years.
  • Good Omens


    The Nice and Accurate Prophecies of Agnes Nutter, Witch is a World Fantasy Award-nominated novel, written as a collaboration between the English authors Terry Pratchett and Neil Gaiman. The book is a comedy about the birth of the son of Satan, the coming of the End Times.
  • Phishing for Phools


    Markets are full of manipulative traps, and we can all be easily coerced into spending money to our detriment. Akerlof and Shiller bring life to their progressive theories with stories of how anyone can be vulnerable to economic trickery.
  • The Last Continent


    Ane awesome parody of Australians.

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->

Going all Multilanguage / i18n... <!-- unimportant stuff, hidden -->

<hr>
<h2>Multi-Language (i18n) Resources</h2>
<p>
  These are configured in the <a href="https://docs.2sxc.org/basics/app/resources.html" target="_blank">App Resources</a> 
  or in the <a href="https://docs.2sxc.org/basics/configuration/index.html" target="_blank">global resources</a>. 
</p>

<ol>
  <li>The Greeting Text: <br>
    @Html.Raw(Resources.Greeting)
  </li>
  <li>A button: <button type="button">@Resources.ButtonOrder</button> </li>
</ol>

<hr>
<h2>Multi-Language (i18n) Content</h2>
<p>
  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. 
</p>

<ul>
  @foreach (var book in AsList(App.Data["Books"])) {
    <li>
      <div style="overflow: auto">
        @if (Text.Has(book.Cover)) {
          <img loading="lazy" src='@Link.Image(book.Cover, width: 200, height: 300, resizeMode: "crop", scaleMode: "both")' align="left" style="padding-right: 20px;">
        }
        <h3>@book.Title</h3> <br>
        @Html.Raw(book.Teaser)
      </div>
    </li>
  }
</ul>

<!-- unimportant stuff, hidden -->