Create Localized Content With Content Swaps
This article is for Account Owners and Project Managers
Sometimes translation isn’t enough, and you may want to completely replace a section of content on a specific translated site. There are three basic ways to swap out content in the Global Delivery Network (GDN).
For example, if you need to display a different set of Social Media icons on each translated version of your site compared to what is displayed on your English site.
- Mark up an HTML element with the Swap Class (sl_swap).
- Take advantage of automatic image/flash/binary file swaps by using a predefined folder structure.
- Use language-specific CSS.
If you are looking to hide an element from appearing on all translated sites, see our article on Hiding content.
GDN Content Swap
The GDN Content Swap feature is provided as a convenient way to manage small amounts of localized content that appear within a page. If you have a significant number of instances where you need to display localized content or if you need to serve an entirely different page layout, consider implementing server-side logic to serve appropriate resources based on HTTP request headers.
Sometimes you want to use content on a localized site that isn’t ‘translated’, just different. For example, you may want to substitute the address of your local office in a particular country, or you may want to replace a customer testimonial from a US customer with one from a Spanish customer.
Create Swaps in your website/application source
You can achieve this by adding an HTML class attribute specific to Smartling GDN; the 'sl_swap' class. First you need to add this class to the content that you want to swap out. For a swap to work, the HTML element MUST have a unique ID, which is later used in the Smartling GDN Configuration, under the Content ID field. The element you are targeting may already have an ID, if not, you'll need to assign one to it. Additionally, the 'sl_swap' class cannot be nested.
<div class="testimonial sl_swap" id="testimonial1"> <img src="/images/testimonials/greg.png"> <p>I used this product and joy returned to my life!</p> </div>
It captures the inner HTML of where the content swap classname and id are added, not the DIV. So in the above example, the content swap would only contain the HTML:
<p>I used this product and joy returned to my life!</p>
You need to make sure you have captured your source content by browsing to that page on one of your translated sites. Once you have captured the string with the 'sl_swap' class present and a unique ID, you can add your localized content in the Smartling Dashboard.
- Do one of the following:
- In the New Experience, go to the gear icon > Project Settings > Content Swaps and select a language.
- In the Classic Experience, go to Global Delivery Network > Content Swaps and select a language.
- Insert the Content ID
- Additionally, you can also search by text in the original content, by inserting Source Content Keywords, or text in the current swap value by inserting Translated Content Keyword, if you have previously saved a language-specific swap value.
- The searches here are simple searches - no exact match or wildcard/glob searches are supported.
- If you don’t need to swap/translate the content - our local testimonial, for example, is already in the correct language - check the Do not translate box.
- Click Save.
If you do need to translate your swapped content, you will need to browse to the translated page again to capture it for translation.
If you repeat your source content in your swap for some languages, remember that they will not automatically change if you alter the source content.
Content Swap Tips
- Make sure you check that your swapped content displays as expected on your translated sites.
- To avoid overloading existing elements, you can always surround them with a tag and use that to hold the sl_swap class and unique ID.
- Be aware that using sl_swap on an inline tag will cause Smartling to treat it as a block tag. This may cause unexpected results. So use a block tag where possible and be sure to check that the resulting content displays as expected.
- You can delete swaps that are no longer present on your original site to keep your list organized. If you delete a swap, but it actually is still present on the original site, it will re-appear once a localized page request is made to it. Note that when browsing swaps, we show one language at a time, but deleting a swap will delete it for all languages.
Content Swaps in the Head
Content Swaps also work on <title> and <meta> elements in the head of the page:
<!-- SL:swap-start:id:/page/html.html-keywords --> <meta name="keywords" content="Paris, reservation, hotel"> <!-- SL:swap-end -->
If you tag meta keywords for swapping, Smartling will treat the swapped content as a comma-separated list.