[POC] Image localization in tech docs

Goal

Evaluate two approaches for handling images in translated tech docs to determine the most efficient solution:

  1. Absolute URL, i.e. convert all relative image paths to absolute URLs pointing to the English docs. Example: ../../ci/img/get_started_cicd_v16_11.png → https://docs.gitlab.com/ci/img/get_started_cicd_v16_11.png
  2. Code logic in the Hugo build process to correctly resolve image paths without modifying the markdown

Requirements 

Images need to be viewable in both the GitLab repository and on the GitLab Docs site. More specifically: 

  1. When a user right clicks an image on a JA docs page (for example the translated page https://docs.gitlab.com/development/i18n/translation/#context) , the following English image from should open in a new browser tab: https://docs.gitlab.com/development/i18n/img/crowdin-editor-string-context_v17_10.png 
  2. When a user opens the JA page https://docs.gitlab.com/development/i18n/translation/ from the docs site, the English image should be visible
  3. When a user opens the JA file https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/development/i18n/translation.md from the /doc-locale folder, the English image (from the original location) should be visible in the Preview mode in markdown 

Deliverables

  • Recommendation for the most efficient approach (1 or 2^^ , or other depending on the POC outcome)
  • Accordingly modified requirements based on the approach
Edited by Rasam Hossain