Template Tags

exp:rosie:translate

The {exp:rosie:translate} tag pair is Rosie’s workhorse. This is the tag you will use to actually translate your content.

{exp:channel:entries channel="your-channel"}
  {exp:rosie:translate from="en" to="{rosie_language}"}
    <h1>{title}</h1>
    {content}
  {/exp:rosie:translate}
{/exp:channel:entries}

Parameters

All parameters are optional unless otherwise mentioned.

from (required)

The language code your content is in to begin with. This parameter is required.

{exp:rosie:translate from="en" to="es"}
  Your content
{/exp:rosie:translate}

to

The language code you would like your content to be translated to. You can pass any valid language code supported by your API or you can pass the {rosie_language} variable if you are using the first URL segment to set your language code.

Example using explicit language code:

{exp:rosie:translate from="en" to="es"}
  Your content
{/exp:rosie:translate}

Example using Rosie Global Language Variable:

{exp:rosie:translate from="en" to="{rosie_language}"}
  Your content
{/exp:rosie:translate}

local_id

In order to take advantage of Rosie’s Local Storage functionality (which we strongly recommend you do to avoid unnecessary API calls and keep your API costs down) you will need to pass a local_id parameter. This local_id must be a unique string for this piece of content, much like a url_title in your channel entries. One way of accomplishing this is to concatenate the channel of your content and content’s entry_id. For example:

{exp:channel:entries channel="your-channel"}
  {exp:rosie:translate from="en" to="{rosie_language}" local_id="{channel_title}_{entry_id}"}
    <h1>{title}</h1>
    {content}
  {/exp:rosie:translate}
{/exp:channel:entries}

local_break_channels

It’s great that Rosie can store your translations locally, but what happens if you make changes to the original content? That’s where setting of local breaks comes in. If you would like your local storage for this Rosie tag to be cleared every time someone updates a particular channel, simply pass one or more pipe separated channels to the local_break_channels tag.

{exp:rosie:translate from="en" to="es" local_id="random_{entry_id}" local_break_channels="channel_1|channel_2|channel_3"}
  Your content
{/exp:rosie:translate}

local_break_entries

If you prefer your local storage breaks to be more granular than at the channel level, you can pass Rosie a pipe separated list of entry_ids. When those entries are updated, Rosie will clear the appropriate local storage.

{exp:channel:entries channel="your-channel"}
  {exp:rosie:translate from="en" to="{rosie_language}" local_id="{channel_title}_{entry_id}" local_break_entries="{entry_id}"}
    <h1>{title}</h1>
    {content}
  {/exp:rosie:translate}
{/exp:channel:entries}

exp:rosie:languages

This tag pair will output information about all of the languages you have selected from Rosie’s Control Panel.

Here’s an example that creates a list of your selected languages which will link to the page you are on translated accordingly.

<ul>
  {exp:rosie:languages}
    <li><a href="/{rosie_language_abbreviation}{rosie_uri_string}">{rosie_language_full_name}</a></li>
  {/exp:rosie:languages}
</ul>

Variables

rosie_language_abbreviation

The language code of your selected language. For example, en, es, de, fr, etc.

rosie_language_full_name

The full name of your selected language.

This tag will return a dropdown form element populated with all the languages you selected within the Rosie Control Panel.

{exp:rosie:language_dropdown id='rosie_languages'}

You could use this, along with a little jQuery to quickly toggle languages. For example:

$(document).ready(function() {
  $("#rosie_languages").change(function(){
    window.location.href = $(this).val();
  });
});

All parameters are optional unless otherwise mentioned.

An id which will be applied to your select element.

{exp:rosie:language_dropdown id="rosie_languages"}

A class which will be applied to your select element.

{exp:rosie:language_dropdown class="rosie_languages"}

A name element for your select element. This will default to rosie_languages.

{exp:rosie:language_dropdown name="custom_name"}

This is the language which should appear selected when the page loads. If you do not pass this parameter, Rosie will check to see if the {rosie_language} global variable has been set and default to that.

{exp:rosie:language_dropdown selected="{segment_1}"}

exp:rosie:link

One issue you may run into when developing your translated content using Rosie is how to create standard anchor tags. Let’s say you hard code your links like so:

<a href="/stuff/things">Stuff and things</a>

Now, your user decides they want to view this page in Spanish, appending an /es to the beginning of your current URL. The problem is that when the user clicks the anchor above, it is going to take them back to English (or whatever your default language may be).

This is where the {exp:rosie:link} tag comes in. You can pass your href to the exp:rosie:link tag and it will automatically prepend it with the language code of the language your user is currently in.

<a href="{exp:rosie:link href="/stuff/things"}">Stuff and things</a>

This will ensure that your user remains in their currently selected language.

Global Variables

The Rosie Extension starts each page load by doing a few things.

It checks the first URL Segment of your current page against the list of languages you have selected within the Rosie CP.
If the first segment matches the language code of a selected language, Rosie does the following:
- Assigns the language code to the {rosie_language} global variable.
- Assigns the remainder of the URL segments to the {rosie_uri_string} variable.
If the first segment does not match the language code of a selected language, Rosie does nothing and processes the URL normally.

{rosie_language}

If the first URL Segment of your current page matches the language code of a language selected within your Control Panel, that language code is assigned to this variable.

{rosie_uri_string}

If the first URL Segment of your current page matches the language code of a language selected within your Control Panel, the remainder of the URL segments (not including the language code) are assigned to this variable.

The Outfit

Rosie for ExpressionEngine