Links in mkdocs templates are no longer referenced correctly

[UlricusR]

I have the following configuration with mkdocs-static-i18n release 1.0.2:

plugins:
  - i18n:
      languages:
        - locale: en
          name: English
          build: true
          default: true
        - locale: de
          name: Deutsch
          build: true
          site_name: Projektübersicht
          site_description: >-
            Projektübersicht für rueth.info
          site_url: https://www.rueth.info/de
          nav_translations:
            EasyFPU for iOS: EasyFPE für iOS
            EasyFPU for Android: EasyFPE für Android
            EventList for Joomla: EventList für Joomla
            ChurchCal for Joomla: ChurchCal für Joomla
          nav:
            - EasyFPE für iOS: https://www.rueth.info/iOS-EasyFPU/de
            - EasyFPE für Android: https://www.rueth.info/Android-EasyFPU/de
            - EventList für Joomla: https://www.rueth.info/joomla4-eventlist/de
            - ChurchCal für Joomla: https://www.rueth.info/joomla-churchcal/de

In my localized (German) index.de.md, I reference a customized template, stored in material/.overrides:

---
template: home-de.html
---

Within this template html file (home-de.html), I use links to (non-localized) images stored in docs/assets/images like as follows:

<img class="owl-background" src="assets/images/pizza-4968645_1920.jpg" alt="EasyFPE" />

When building the site, the localized de/index.html file cannot find these images:

WARNING - [20:06:15] "GET /de/assets/images/pizza-4968645_1920.jpg HTTP/1.1" code 404

Reason: No de/assets folder - the link should be ../assets/images/pizza-4968645_1920.jpg.

It used to work in the 0.x version.

[kamilkrzyskow]

Could be related to the issue I have, more details https://github.com/ultrabug/mkdocs-static-i18n/issues/251#issuecomment-1704452601

[UlricusR]

Yes, seems to be the same.

[ultrabug]

Actually what changed is that the 1.0.0 version behaves better and stopped copying the same non localized assets to the language folders.

On your project @UlricusR the 0.5x version of the plugin generates:

├── de
│   ├── assets
│   │   ├── images
│   │   │   ├── favicon.png
│   │   │   ├── Joomla-flat-logo-en.png
│   │   │   ├── joomla_wallpaper.png
│   │   │   ├── logo_white_small.png
│   │   │   ├── pizza-4968645_1920.jpg
│   │   │   ├── pizza_small.png
│   │   │   ├── Portfolio_ChurchCal.png
│   │   │   └── Portfolio_EventList.png
│   │   ├── javascripts
│   │   │   ├── jquery.min.js
│   │   │   └── owl.carousel.min.js
│   │   └── stylesheets
│   │       ├── extra.css
│   │       ├── home.css
│   │       ├── owl.carousel.min.css
│   │       └── owl.theme.default.min.css
│   ├── CNAME
│   ├── index.html
│   └── legal
│       └── index.html

While the 1.0.3 version of the plugin generates:

├── de
│   ├── index.html
│   └── legal
│       └── index.html

The resulting localized site is way smaller and the build more efficient of course.

The first fix I can think of and tried on your source is to use the url jinja filter to correct the links, which would look like the following diff:

diff --git a/portfolio-page/material/.overrides/home-de.html b/portfolio-page/material/.overrides/home-de.html
index f60a269..3713cd2 100644
--- a/portfolio-page/material/.overrides/home-de.html
+++ b/portfolio-page/material/.overrides/home-de.html
@@ -2,9 +2,9 @@

 <!-- Custom front matter -->
 {% block extrahead %}
-<link rel="stylesheet" href="assets/stylesheets/owl.carousel.min.css">
-<link rel="stylesheet" href="assets/stylesheets/owl.theme.default.min.css">
-<link rel="stylesheet" href="assets/stylesheets/home.css">
+<link rel="stylesheet" href="{{ 'assets/stylesheets/owl.carousel.min.css' | url }}">
+<link rel="stylesheet" href="{{ 'assets/stylesheets/owl.theme.default.min.css' | url }}">
+<link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}">
 {{ super() }}
 {% endblock %}

@@ -13,7 +13,7 @@
 <div class="owl-carousel owl-theme">
   <div class="item">
     <div class="img-gradient">
-      <img class="owl-background" src="assets/images/pizza-4968645_1920.jpg" alt="EasyFPE" />
+      <img class="owl-background" src="{{ 'assets/images/pizza-4968645_1920.jpg' | url }}" alt="EasyFPE" />
     </div>
     <div class="owl-central">
       <h1 class="owl-title">EasyFPE</h1>
@@ -27,7 +27,7 @@
   </div>
   <div class="item">
     <div class="img-gradient">
-      <img class="owl-background" src="assets/images/joomla_wallpaper.png" alt="Joomla!-Erweiterungen" />
+      <img class="owl-background" src="{{ 'assets/images/joomla_wallpaper.png' | url }}" alt="Joomla!-Erweiterungen" />
     </div>
     <div class="owl-central">
       <h1 class="owl-title">Joomla!-Erweiterungen</h1>
@@ -44,8 +44,8 @@
 {% endblock %}

 {% block scripts %}
-<script src="assets/javascripts/jquery.min.js"></script>
-<script src="assets/javascripts/owl.carousel.min.js"></script>
+<script src="{{ 'assets/javascripts/jquery.min.js' | url }}"></script>
+<script src="{{ 'assets/javascripts/owl.carousel.min.js' | url }}"></script>
 <script type="text/javascript">
   $('.owl-carousel').owlCarousel({
       items:1,

[UlricusR]

Thanks, the jinja filter fix helped - and is actually very elegant as solution. Appreciated :-)