Give your translators and team members more context by uploading screenshots of your app or website.

Dmitry Olenovs avatar
Written byDmitry Olenovs
Updated over a week ago

You can attach one or morescreenshotsto your keys thus providing additional context for translators. This feature can come in very handy because understanding where and how the text will be used is very important for translators.

Getting started

有两种方法可以开始with screenshots. First, you can clickScreenshotsin the top menu of your project:

You'll be presented with all the screenshots your project currently has. Here you'll be able to manage these screenshots, remove them, and upload new ones. Please check theManaging project screenshotssection to learn more.

The second way involves opening the project editor and finding a specific translation key. Simply click on theScreenshotsbutton to link, unlink, and upload new screenshots:

Managing project screenshots

After clickingScreenshotsin the top menu, you'll be presented with the following page:

Let's discuss the main elements:

  1. Uploadmore screenshots. Drag and drop new screenshots to the drop area or select an image from your computer. Please note that the maximum supported dimensions is 16000x16000px.
    If theTry to find keys on imagesoption is enabled, Lokalise will automatically recognize the text on the images and link the uploaded screenshots to the corresponding translation keys. In other words, Lokalise will try to detect the base translation values on the uploaded image and highlight it showing the text's exact position. This highlighting will be visible when you open a screenshot by clicking on its preview under the key name. Please note that this feature has certain limitations as explained in theAutomatic key detectionsection.

  2. Filteryour screenshots.

  3. Select all items添加标记或删除所有选中的屏幕截图。

  4. Add a newtagto the screenshotor modify the existing ones.

  5. Searchscreenshots by name.

  6. Choose how many screenshots are shown perpage(16, 32, 64, or 128).

To manage a screenshot, simply click on it. Please proceed to theScreenshot editorsection to learn more.

Once you select one or multiple screenshots by ticking the checkboxes next to them, the screenshot bulk menu will pop up. Using this menu you canadd or remove tagsto/from multiple screenshots anddeletethe chosen items.

Automatic key detection

The automatic key detection system can recognize the text on the screenshots if the text meets the following conditions:

  1. Only thebase language valuescan be recognized. The supported languages are English, Russian, German, Spanish, Italian, Swedish, Finnish, Turkish, and Polish.

  2. Automatic key tagging is able to recognizeonly the existing keys. Please make sure that the key already exists in your project, before trying to link it to the screenshot.

  3. Thetext must be clearly visibleon the screenshots. Depending on the font, background and image quality, automatic key detection may or may not recognize some strings.

Screenshot editor

To access the screenshot editor, proceed to theScreenshotspage and click on the screenshot itself.

You'll be presented with the following dialog:

  1. Navigatebetween the screenshots using the left/right buttons.

  2. Adjust the screenshot'stitle.

  3. Provide a short screenshotdescription. It will be visible for all project contributors.

  4. Add existingtagsor create new ones.

  5. Downloadthe origin image.

  6. Updatethe screenshot image or replace it with a new one.
    Please remember that if the replacement image has a different size,all linked key coordinates will be removedand you will have to add them again.

  7. Translation keys linkedto the screenshot. You can see the key name (sample) and the base language value ("Sample Project").

  8. Link screenshotto a new key by selecting the area on the image itself to highlight the text position. Once the area is drawn, you'll be able to choose a key to link to:

It is also possible to link or unlink multiple screenshots in bulk asexplained in the section below.

Linked keys options

For each linked key you'll see three actions:

  • Open key in a new tab— you will be navigated to the corresponding translation key to start editing or translating it.

  • Coordinates— adjust the coordinates for the highlighted portion on the image or remove the current coordinates.

  • Unlink key— unlink the key from the screenshot. Please note that clicking on this button will not delete nor screenshot neither the key.

Managing key screenshots

You can also manage screenshots linked to a specific translation key. To achieve that, click on theScreenshotsbutton under a key name. Please find more information on this feature in theKey editor and key actionsarticle.

Linking/unlinking screenshots in bulk

You can link or unlink screenshots to/from multiple translation keys at once. To achieve that, select one or more keys in theproject editorand selectScreenshots...from thebulk actionsdropdown:

ClickProceed. You will see the dialog box to manage linked screenshots, link existing ones, or upload new screenshots:

Did this answer your question?