How to add localized images to your site

How it works

You can add an image with text localized for different languages via a custom HTML code. This feature will help you make the site more informative for users from different countries. You may use an existing solution or write your own code.

How to get it

Using an existing solution

  1. Go to Publisher Account > Site Builder.
  2. In the Header block, set up the Translations component.
  3. Select the language(s) you want to add to a localized image.
  4. Insert the following code to the Custom code block:

Copy
Full screen
Small screen
<style>
  .localised-image {
    text-align: center;
    padding: 4em 1em;
  }
  .localised-image img {
    width: 100%;
  }
</style>  
<div class="localised-image">
  <img class="lazy loaded" data-src="https://cdn3.xsolla.com/files/uploaded/2340/d9d69114bb9f7c60f0981639aaa4bf3a.jpeg" />
</div>

  1. Put the link to each image to the img element of the data-src attribute. Supported image formats: JPEG, PNG, GIF.
  2. To add several localized images, duplicate the block with the div tag and change the image URLs.
  3. Click Preview to see your changes.

Watch the tutorial video for this instruction:


Writing your own code

If you want to use your own code:

  1. Go to Publisher Account > Site Builder.
  2. Insert the code to the Custom code block.
  3. Click Preview to see your changes.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We're sorry to hear that
Please explain why this article wasn't helpful to you. Message
Thank you for your feedback!
We'll review your message and use it to help us improve your experience.

Continue reading