add relative url to all resource urls

_includes/figure.html

@@ -1,4 +1,4 @@
 <figure>
-  <img src="{{ include.src }}" alt="{{ include.title }}" title="{{ include.title }}">
+  <img src="{{ include.src | relative_url }}" alt="{{ include.title }}" title="{{ include.title }}">
   <figcaption>{{ include.title }}</figcaption>
 </figure>

_includes/footer.html

@@ -1,5 +1,5 @@
 <footer class="text-center m-16">
-    <a href="/impressum.html">Impressum</a>
+    <a href={{ "impressum.html" | relative_url }}>Impressum</a>
     <div class="mt-8">
         Copyright &copy; 2024 Prachtsaal Studio. All rights reserved.
     </div>

_includes/lightbox.html

@@ -51,6 +51,6 @@
 
 
     <!-- Scripts -->
-    <script src="/assets/js/caesar-lightbox.js"></script>
-    <script defer src="/assets/js/[email protected]"></script>
+    <script src={{ "/assets/js/caesar-lightbox.js" | relative_url }}></script>
+    <script defer src={{ "/assets/js/[email protected]" | relative_url }}></script>
 

_includes/navigation.html

@@ -1,7 +1,7 @@
 <nav class="flex nav-x nav-y justify-between items-start">
   <div>
-    <a href="/">
-      <img src="/assets/img/prachtsaal-logo.png" width="150">
+    <a href={{ "/" | relative_url }}>
+      <img src={{ "/assets/img/prachtsaal-logo.png" | relative_url }} width="150">
     </a>
   </div>
 
@@ -12,10 +12,10 @@
     <!-- <div class="hidden block sm:flex sm:flex-row sm:space-x-12" id="menu"> -->
     <div class="hidden sm:flex links-without-underline" id="menu">
       <ul class="sm:flex sm:flex-row sm:space-x-12 list-none">
-        <li><a href="/events.html">events</a></li>
-        <li><a href="/people.html">people</a></li>
-        <li><a href="/about.html">about</a></li>
-        <li><a href="/#contact">contact</a></li>
+        <li><a href={{ "/events.html" | relative_url }}>events</a></li>
+        <li><a href={{ "/people.html" | relative_url }}>people</a></li>
+        <li><a href={{ "/about.html" | relative_url }}>about</a></li>
+        <li><a href={{ "/#contact" | relative_url }}>contact</a></li>
       </ul>
 
     </div>  

_layouts/call.html

@@ -15,7 +15,7 @@ <h2 class="text-sm my-2">{{ page.subtitle }}<br>{{ page.date | date: "%d %B %Y"
 
             <div class="md:w-[760px]">
                 {% if page.main_image %}
-                <img src="{{ page.main_image }}">
+                <img src="{{ page.main_image | relative_url }}">
                 {% endif %}
             </div>
 
@@ -27,7 +27,7 @@ <h2 class="text-sm my-2">{{ page.subtitle }}<br>{{ page.date | date: "%d %B %Y"
             <div class="grid grid-flow-row md:grid-cols-2 justify-center gap-2">
                 {% for image in page.images %}
                     <figure class="max-w-lg">
-                      <img class="h-auto max-w-full rounded-lg caesar-lightbox cursor-pointer" src="{{ image.file }}" alt="image description">
+                      <img class="h-auto max-w-full rounded-lg caesar-lightbox cursor-pointer" src="{{ image.file | relative_url }}" alt="image description">
                       <figcaption class="mt-2 text-sm text-center text-gray-500 dark:text-gray-400">{{ image.label }}</figcaption>
                     </figure>
                 {% endfor %}
@@ -52,12 +52,12 @@ <h2 class="text-sm my-2">{{ page.subtitle }}<br>{{ page.date | date: "%d %B %Y"
 
             <div class="grid grid-row md:grid-cols-2 justify-center gap-2">
                     <figure class="max-w-lg">
-                      <img class="h-auto max-w-full rounded-lg caesar-lightbox cursor-pointer" src="/assets/img/news/foyer.webp" alt="">
+                      <img class="h-auto max-w-full rounded-lg caesar-lightbox cursor-pointer" src={{ "/assets/img/news/foyer.webp" | relative_url }} alt="">
                       <figcaption class="mt-2 text-sm text-center text-gray-500 dark:text-gray-400">The entry of Prachtsaal</figcaption>
                     </figure>
 
                     <figure class="max-w-lg">
-                      <img class="h-auto max-w-full rounded-lg caesar-lightbox cursor-pointer" src="/assets/img/news/garden.webp" alt="">
+                      <img class="h-auto max-w-full rounded-lg caesar-lightbox cursor-pointer" src={{ "/assets/img/news/garden.webp" | relative_url }} alt="">
                       <figcaption class="mt-2 text-sm text-center text-gray-500 dark:text-gray-400">Our garden</figcaption>
                     </figure>
               </div>

_layouts/default.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <link href="/assets/css/styles.css" rel="stylesheet">
+  <link href={{ "/assets/css/styles.css" | relative_url }} rel="stylesheet">
   <title>
     {% assign prefix = "Prachtsaal Studio" %}
     {% if page.title == prefix %}
@@ -16,7 +16,7 @@
   <meta name="description" content="{{ page.description }}">
   {% endif %}
   {% if page.add-js %}
-  <script src="/assets/js/{{ page.add-js }}"></script>
+  <script src={{ "/assets/js/" | append: page.add-js | relative_url }}></script>
   {% endif %}
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ -37,7 +37,7 @@
     </div>
   </div>
 
-  <script src="/assets/js/menu.js"></script>
+  <script src={{ "/assets/js/menu.js" | relative_url }}></script>
 </body>
 
 </html>

_layouts/event.html

@@ -30,7 +30,7 @@ <h2 class="text-sm my-2">{{ page.subtitle }}<br>{{ date_string }}</h2>
 
         <div class="flex flex-col items-center">
             {% if page.main_image %}
-            <img src="{{ page.main_image }}">
+            <img src="{{ page.main_image | relative_url }}">
             {% endif %}
 
 
@@ -40,7 +40,7 @@ <h2 class="text-sm my-2">{{ page.subtitle }}<br>{{ date_string }}</h2>
 
             {% if page.link%}
                 <div class="text-center bg-purple-300 border-2 border-gray-200">
-                    <a href="{{ page.link }}" class="font-bold m-2">{{ page.link_text }}</a>
+                    <a href="{{ page.link | relative_url }}" class="font-bold m-2">{{ page.link_text }}</a>
                 </div>
             {% endif %}
 

_layouts/home.html

@@ -2,7 +2,8 @@
 layout: default
 add-js: newsletter.js
 ---
-<header class="bg-[url('/assets/img/home/404_crop.jpeg')] h-96 bg-center bg-cover">
+{% assign bg_image = "assets/img/home/404_crop.jpeg" | relative_url %}
+<header class="h-96 bg-center bg-cover" style="background-image: url({{ bg_image }});">
   <div class="py-24 px-4 text-white sm:px-24">
     <h1 class="text-left">{{ page.title }}</h1>
     <h2 class="text-left mt-2">{{ page.subtitle }}</h2>  
@@ -15,7 +16,6 @@ <h2 class="text-left mt-2">{{ page.subtitle }}</h2>
     {{ content | markdownify }}
   </div>
 
-
   <div class="m-8 flex flex-col lg:flex-row items-center justify-around gap-4 w-full">
 
     <iframe class="w-3/4 lg:w-1/2 aspect-video" src="https://www.youtube.com/embed/MpDpfBIY1_M" title="George Adje &amp; Dan Gorelick @ Prachtsaal Studio" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
@@ -48,11 +48,11 @@ <h1 class="mb-4"><a name="contact"></a>contact us</h1>
           12053 Berlin<br>
           <br>  
           <a href="https://instagram.com/prachtsaal" target="_blank">
-            <img src="/assets/img/Instagram_Glyph_white_logo.svg.webp" alt="Instagram logo" class="size-6 inline"> Instagram
+            <img src={{ "/assets/img/Instagram_Glyph_white_logo.svg.webp" | relative_url }} alt="Instagram logo" class="size-6 inline"> Instagram
           </a>
           <br>
           <a href="https://buttondown.com/prachtsaal.berlin" target="_blank">
-            <img src="/assets/img/buttondown-logo.webp" alt="Buttondown logo" class="size-6 inline"> Newsletter
+            <img src={{ "/assets/img/buttondown-logo.webp" | relative_url }} alt="Buttondown logo" class="size-6 inline"> Newsletter
           </a>
     </div>
 

_layouts/member.html

@@ -3,14 +3,14 @@
 ---
 <div class="flex flex-row nav-x justify-center">
     <div>
-        <a href="/people.html"><span class="font-bold">&lt;</span> back to all artists</a>
+        <a href={{ "/people.html" | relative_url }}><span class="font-bold">&lt;</span> back to all artists</a>
         <header class="my-16 text-left">
             <h1 class="text-left">{{ page.full_name }}</h1>
         </header>
         <div class="grid md:grid-cols-2 gap-16 xl:max-w-[1520px]">
             {% if page.portrait %}
             <div class="max-w-1/2">
-                <img src="{{ page.portrait }}">    
+                <img src="{{ page.portrait | relative_url }}">    
             </div>
             {% endif %}
             <div>
@@ -20,14 +20,14 @@ <h1 class="text-left">{{ page.full_name }}</h1>
                     {% if page.website %}
                     <br>
                     <span class="font-bold">website:</span> 
-                    <a href="{{ page.website }}">{{ page.website }}</a>
+                    <a href="{{ page.website | relative_url }}">{{ page.website }}</a>
                     {% endif %}
                     {% if page.socials %}
                     <br>
                     <span class="font-bold">socials:</span><br>
                     <ul>
                         {% for link in page.socials %}
-                        <li><a href="{{ link }}">{{ link }}</a></li>
+                        <li><a href="{{ link | relative_url }}">{{ link }}</a></li>
                         {% endfor %}    
                     </ul>
                     {% endif %}
@@ -37,7 +37,7 @@ <h1 class="text-left">{{ page.full_name }}</h1>
                 <br>
                 <div class="grid grid-flow-row lg:grid-col-3 gap-2">
                     {% for image in page.portfolio_image_locations %}
-                    <img src="{{ image }}" class="w-64 object-cover caesar-lightbox cursor-pointer">
+                    <img src="{{ image | relative_url }}" class="w-64 object-cover caesar-lightbox cursor-pointer">
                     {% endfor %}
                 </div>
                 {% endif %}

_layouts/news.html

@@ -13,7 +13,7 @@ <h2 class="text-sm my-2">{{ page.subtitle }}<br>{{ page.date | date: "%d %B %Y"
 
         <div class="flex flex-col items-center">
             {% if page.main_image %}
-            <img src="{{ page.main_image }}">
+            <img src="{{ page.main_image | relative_url }}">
             {% endif %}
 
 
@@ -23,7 +23,7 @@ <h2 class="text-sm my-2">{{ page.subtitle }}<br>{{ page.date | date: "%d %B %Y"
 
             {% if page.link%}
                 <div class="text-center bg-purple-300 border-2 border-gray-200">
-                    <a href="{{ page.link }}" class="font-bold m-2">{{ page.link_text }}</a>
+                    <a href="{{ page.link | relative_url }}" class="font-bold m-2">{{ page.link_text }}</a>
                 </div>
             {% endif %}
 

assets/css/styles.css

@@ -960,10 +960,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-\[url\(\'\/assets\/img\/home\/404_crop\.jpeg\'\)\]{
-  background-image: url('/assets/img/home/404_crop.jpeg');
-}
-
 .bg-cover{
   background-size: cover;
 }

events.html

@@ -30,9 +30,9 @@ <h1>{{ page.title }}</h1>
 
         <div future-date="{{ event_date }}" class="w-full max-w-64 lg:w-64 links-without-underline">
             <div class="font-prachtsaal text-right text-sm">{{ date_string }}</div>
-            <a href="{{ event.url }}" class="flex flex-col">
+            <a href="{{ event.url | relative_url }}" class="flex flex-col">
                 {% if event.main_image %}
-                <img class="w-64" src="{{ event.main_image }}">
+                <img class="w-64" src="{{ event.main_image | relative_url }}">
                 {% endif %}
                 <div class="font-prachtsaal font-bold text-lg">{{ event.title }}</div>
                 <hr class="border-1 border-black">
@@ -56,9 +56,9 @@ <h1>{{ page.portfolio_title }}</h1>
             {% for event in portfolio_events %}
             <div class="w-full max-w-64 lg:w-64 links-without-underline">
                 <div class="font-prachtsaal text-right text-sm">{{ event.date | date: "%d.%m.%Y" }}</div>
-                <a href="{{ event.url }}">
+                <a href="{{ event.url | relative_url }}">
                     {% if event.main_image %}
-                    <img class="w-64" src="{{ event.main_image }}">
+                    <img class="w-64" src="{{ event.main_image | relative_url }}">
                     {% endif %}
                     <div class="font-prachtsaal font-bold text-lg">{{ event.title }}</div>
                     <div class="font-prachtsaal">{{ event.subtitle }}</div>

events/_posts/2024-09-22-art-market.md

@@ -20,7 +20,8 @@ Saturday, 21.09, 14.00-20.00<br>
 Sunday, 22.09, 14.00-20.00<br>
 <br>
 
+{% assign video_url = "/assets/video/the-art-market-3-reel-1-low.mp4" | relative_url %}
 <video width="720" height="1280" controls>
-  <source src="/assets/video/the-art-market-3-reel-1-low.mp4" type="video/mp4">
+  <source src="{{ video_url }}" type="video/mp4">
   Your browser does not support the video tag.
 </video>

index.md

@@ -6,5 +6,5 @@ description: a non-profit art cooperative from Neukölln/Berlin
 ---
 Welcome to Prachtsaal, a vibrant nexus where resident artists and the public converge to explore, innovate, and grow. We showcase cutting-edge visual arts, music, and performances while providing affordable ateliers and inclusive events. Our mission fosters a dynamic environment of playfulness, purpose, and discovery. Join us in pushing the boundaries of creativity and community enrichment as a dedicated non-profit cooperative.
 
-<a href="/news/2024/08/26/open-call.html" style="position: absolute; right: 3%; top: 400px; color: orange; rotate: 6deg; font-size: 3vw; font-weight: bold; text-shadow: 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;">studios available!</a>
+<a href="{{ "/news/2024/08/26/open-call.html" | relative_url }}" style="position: absolute; right: 3%; top: 400px; color: orange; rotate: 6deg; font-size: 3vw; font-weight: bold; text-shadow: 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;">studios available!</a>
 

news/_posts/2024-08-26-open-call.md

@@ -12,7 +12,7 @@ tags: call
 ---
 
 <video width="720" height="1280" controls>
-  <source src="/assets/video/open_call_august_2024_low.mp4" type="video/mp4">
+  <source src="{{ "/assets/video/open_call_august_2024_low.mp4" | relative_url }}" type="video/mp4">
   Your browser does not support the video tag.
 </video>
 <br>

people.html

@@ -17,11 +17,11 @@ <h1>{{ page.title }}</h1>
             {% assign content = member.content | strip_newlines %}
 
             {% if content != "" %}
-            <a href="{{ member.url }}">
+            <a href="{{ member.url | relative_url }}">
             {% endif %}
 
                 {% if member.thumb %}
-                <img class="w-64 object-cover" src="{{ member.thumb }}">
+                <img class="w-64 object-cover" src="{{ member.thumb | relative_url }}">
                 {% endif %}
 
                 <span class="member-text">
@@ -50,11 +50,11 @@ <h1 class="min-[460px]:mx-8 mb-28">
             {% assign content = member.content | strip_newlines %}
 
             {% if content != "" %}
-            <a href="{{ member.url }}">
+            <a href="{{ member.url | relative_url }}">
             {% endif %}
 
                 {% if member.thumb %}
-                <img class="w-64 object-cover" src="{{ member.thumb }}">
+                <img class="w-64 object-cover" src="{{ member.thumb | relative_url }}">
                 {% endif %}
 
                 <span class="member-text">
@@ -80,9 +80,9 @@ <h1 class="min-[460px]:mx-8 mb-28">
     {% for org in site.data.communities %}
         {% if org.visible %}
         <div class="w-full max-w-32 lg:w-32">
-            <a href="{{ org.website }}" target="_blank">
+            <a href="{{ org.website | relative_url }}" target="_blank">
                 {% if org.thumb %}
-                <img class="size-32 object-contain" src="{{ org.thumb }}">
+                <img class="size-32 object-contain" src="{{ org.thumb | relative_url }}">
                 {%else %}
                 <div class="size-32 flex items-center text-center">
                     <div class="font-prachtsaal">{{ org.name }}</div>