Important:

1. The site's default language is English.

2. When user switches from English to Chinese language, pages without translation will be empty. However, some pages contain blocks with pre-configured translation either by a contributed module or the Drupal system itself e.g. the contact form, or some terms that came with the commerce module.

An empty page because not translated.

3. Typically,when translating a page, you need to make sure the following are all translated...

  • The page title
  • The main nav menu link for the page
  • The page path or url (the link that shows up in the browser address bar).
  • The page's contents or content blocks that were inserted on the page
What needs translation.

Step I - Translate page title, path and menu link

1. Sign in to the site.

2. Go to Admin > Content. Select the content item you wish to translate (e.g. the About page, which is a Basic page content type).

Click on admin -> content
Locate the page you want to translate, e.g. About page
 

3. Click 'edit'.

4. Locate the set of tabs on the upper left side of the page. Click on 'Translate'.

Click on the Translate tab

5. You will find that in the Language table, it says that 'Chinese, Simplified' has a status of 'Not translated'. Click on 'Add' to add Chinese translation.

Click on Add to add Chinese translation

6. Update the following entries to their Chinese translation

  • Title
  • Menu link title
  • URL alias
Update by typing or pasting in the Chinese translation

7. Hit Save.

If you check the updated About page and switch site to Chinese, you will find the said items translated. But the page remains empty. So next, you need to translate the inserted content blocks.

Check the page to see items translated

Step II - Translate inserted 'content blocks' on the page

1. On the front end, go to the English version of page you wish to translate (e.g. the About page)

2. Locate or identify the blocks on the page. At the upper right corner of every block, you will find there is a edit clickable icon ( a pencil icon).

The contextual clickable Edit icon provides instant access to the 'Edit' page

3. Click on this 'edit' icon and a contextual set of links appear

  • Quick edit
  • Configure block
  • Translate block
  • Edit
  • Translate
Click on 'Translate'

4. Click on Translate

Note: You don't need to pick 'Translate block' as this is for translating the block's config interface. We'd want to pick 'Translate' because this is for editing the block's content, which is what we want.

5. On the next page, you will find in the Language table, it says that 'Chinese, Simplified' has a status of 'Not translated'. Click on 'add'.

Translate the contents of the page

  • the block description (optional, as this is not seen publicly)
  • the image alternative text (for web accessibility to people with disabilities or so users know what the image is about when, for example, the image fails to load)
  • the text inside the 'Body' field which comprise the block's main content
Edit block contents

Tip:

When editing the Body field content, it is always better to perform edits using Source Code format - the format that also displays the html code. This ensures the HTML remains clean and no unwanted markups are created, which sometimes cause the content display to be broken.

Edit in source format that shows html markups
Translations pasted in
 

6. Save the page

Step III - Configure the translated block so it appears on the page

1. On the Chinese version of the page, copy the part of the url after the language code (include the preceding slash)

Example

Full path: kq.3cloud.sg/zh-hans/关于我们

Part to copy: /关于我们

Copy url path and set aside for use

2. On the English version of the page, click on the block's 'Edit' icon again and this time, select 'Configure block'

Click on 'Configure block'

3. Under 'Visibility' settings, click on 'Pages'

Select 'Page' tab

4. In a separate line, paste in the copied url path e.g. /关于我们

Paste in path in its own line

5. Save the page.

6. Lastly, we also need to translate the block title. On the English version of the page, click on the block's 'edit'icon'. when the contextual set of links appear, choose 'Translate block'.

Translate block to translate the title 'Our Philosophy'

In the next step, in the Language table, click on 'Add' to add Chinese translation.

Click on 'Add'

Replace the English title with the Chinese title.

Update Title to Chinese

Save the page

When you view the Chinese version of the page, the block should be visible now

Block in Chinese