Skip to content

Use absolute URLs for images

Sarah German requested to merge 69-absolute-img-urls into main

What does this MR do and why?

Adds a render hook to rewrite image URLs so that they're always absolute.

We want to use an absolute path for images in order to avoid different behavior on pages that end with an extensionless URL and a trailing slash (see gitlab-org/gitlab-pages#354 (closed)).

This should also clear up a problem on the Hugo site where the prettyURLs setting causes images on non-index.md pages to be broken, like this one: https://gitlab-org.gitlab.io/technical-writing-group/gitlab-docs-hugo/operations/metrics/#metric-details

Closes #69 (closed)

Screenshots, screen recordings, or links to review app

Before After
image image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. Browse the site and look for broken images. Here are some example pages that include images:
Local Hugo (absolute img paths) Production (URL with broken images) Production (URL with working images)
http://localhost:1313/operations/metrics/#metric-details https://docs.gitlab.com/ee/operations/metrics/#metric-details https://docs.gitlab.com/ee/operations/metrics#metric-details
http://localhost:1313/install/aws/#architecture https://docs.gitlab.com/ee/install/aws/index.html/#architecture https://docs.gitlab.com/ee/install/aws/#architecture
http://localhost:1313/user/group/#add-projects-to-a-group https://docs.gitlab.com/ee/user/group/index.html/#add-projects-to-a-group https://docs.gitlab.com/ee/user/group/#add-projects-to-a-group
http://localhost:1313/user/project/merge_requests/conflicts/ https://docs.gitlab.com/ee/user/project/merge_requests/conflicts/ https://docs.gitlab.com/ee/user/project/merge_requests/conflicts

The local Hugo site should have working images for all of these, and if you inspect the HTML source, image paths are absolute, so they shouldn't vary by URL format like the current production site.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #69 (closed)

Edited by Sarah German

Merge request reports