Storing image files for automated link rewriting

Automating Image Link Localization in Language IO

The purpose of this article is to describe how Language IO can automate the editing of image links in articles. This editing process complements the translation of the body of the article. This way, the completed translation shows screenshots and other images that were localized into the same language as the main content.

Step 1: Avoid improper storage of image files

Typically, you will use a CRM (Client Relationship Management) platform to create your original content. These platforms allow authors to upload image files directly into their articles. They then store these image files internally in the CRM.

Using the CRM image file upload tool may be the easiest way to load the image file in the source article, but it often does not produce a predictable path for storage that Language IO could use to automate the editing of image links in the localized or translated file.

For example, this is a path you may see when you load an image file into Zendesk.

<img src="/hc/article_attachments/360012011992/screenshot.png">

If Language IO were to load the Japanese screenshot manually into Zendesk, the system would give the image file a new, unique ID (the ID is the text marked in red in the above link). This unique ID changes randomly with every upload. This means that Language IO cannot predict it with an algorithm or a rule.

Language IO needs a way to accurately and automatically rewrite the src attribute. This way, the links within a Japanese translation of the English article will point to the corresponding Japanese screenshot. The next section explains how to achieve this.

Step 2: How to properly store your image files

Now, suppose that instead of loading your English image files through Zendesk, as described in the section above, you store them on a server space that you control (for example, your company servers). You can then place them in a language-specific directory such as:

http://www.mydomain.com/images/english_images/screenshot.png

In this case, the src attribute in the img tag embedded in the English article looks like this:

<img src="http://www.mydomain.com/images/english_images/screenshot.png">

With this approach, you store every image file in English, that is linked-to in an English article, in this english_images directory. This means that when you create a version of "screenshot.png" in another language, such as Japanese, you can leave the name of the Japanese image file unchanged, and simply store it in a Japanese-specific directory such as japanese_images.

In summary, you can store all localized versions of your English image files with the same name as the original English image file, and simply adapt the name of the directory to match the relevant language. You can then have more directories as needed, spanish_images for Spanish images, french_images for French images, etc.

This way, Language IO can create a rule that says that whenever the system translates an English article into Japanese, it also rewrites the src attribute in all img tags in the article to replace english_images with japanese_images:  

<img src="http://www.mydomain.com/images/japanese_images/screenshot.png">

Because the image file name is the same, Language IO only needs to edit the name of the language-specific directory to make sure that the Japanese version of the screenshot appears, instead of the English.

Alternative conventions

The above example is not the only way to automate image link rewriting. The trigger for the Language IO relinking rules can be a language-specific directory, but also a language-specific domain, a language code in a URL parameter, the image file name itself, or something else. It simply requires a repeating pattern to work.

For example, you may not want to have language-specific directories, and prefer to store all image files in the same exact directory. In this case, simply add a language code to the file name itself, so that the rules rewrites the file name.

If your English image is pulled into the English article like this:

<img src="http://www.mydomain.com/images/screenshot.png">

When you create the Japanese version of "screenshot.png", name it "screenshot_ja.png". Language IO will create a rule so that wherever there is an img tag in an article, the system adds the language code to the name of the image file, in this case:

<img src="http://www.mydomain.com/images/screenshot_ja.png">

If your image files are not yet localized

You do not need to have the files localized to start preparing for language-specific versions of your articles. As best practices, you may go ahead and create all your language specific directories, and simply copy the English image files into each of those directories. At this stage, only make sure that the names of language-specific files are the same as the English files. Language IO can add the appropriate rules and rewrite the links during the article translation process.

This way, if you have the screenshots localized at a later date, you can simply overwrite the copies of English screenshots in each language-specific directory with their language-specific equivalent. The images will appear in the articles automatically, because Language IO already rewrote the links.