use translated title image

densitydesign · Oct 23, 2024 · 4e10c69 · 4e10c69
1 parent 192ca5b
commit 4e10c69
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/assets/title.png b/assets/title.png
diff --git a/index.html b/index.html
@@ -39,7 +39,14 @@
     </div>
 
     <div class="page page-flip visible" id="page-start">
-      <h1><img src="assets/title.png" data-i18n-alt="title" alt="Stories of online harassment" /></h1>
+      <h1>
+        <img
+          data-i18n-src="assets/title/"
+          data-i18n-alt="title"
+          src="assets/title/en.png"
+          alt="Stories of online harassment"
+        />
+      </h1>
       <div>
         <p data-i18n="start-intro">To explore the poster, give access to your phone camera and calibrate it.</p>
         <button data-i18n="start-button" id="button-start" disabled>start</button>

diff --git a/src/i18n.js b/src/i18n.js
@@ -14,6 +14,11 @@ const update = (lang) => {
   for (const el of Array.from(document.querySelectorAll('[data-i18n-alt]'))) {
     el.alt = getString(lang, el.dataset['i18nAlt']);
   }
+
+  for (const el of Array.from(document.querySelectorAll('[data-i18n-src]'))) {
+    el.src = el.dataset['i18nSrc'] + lang + '.png';
+    el.onerror = () => el.src = el.dataset['i18nSrc'] + 'en.png';
+  }
 };
 
 module.exports = (select) => {