support multiple image formats

BxBServers · Nov 3, 2024 · 6aad7ad · 6aad7ad
1 parent 33ab83e
commit 6aad7ad
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 20 deletions.
diff --git a/.github/workflows/site.yml b/.github/workflows/site.yml
@@ -35,6 +35,9 @@ jobs:
         with:
           github_access_token: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Build Images
+        run: nix develop --command just build-images
+
       - name: Build Site
         run: nix develop --command just build
 

diff --git a/static/images/4k/default.png → images/servers/default.png b/static/images/4k/default.png → images/servers/default.png
diff --git a/static/images/4k/pv.png → images/servers/pv.png b/static/images/4k/pv.png → images/servers/pv.png
diff --git a/static/images/4k/pv2.png → images/servers/pv2.png b/static/images/4k/pv2.png → images/servers/pv2.png
diff --git a/static/images/4k/pv_remastered.png → images/servers/pv_remastered.png b/static/images/4k/pv_remastered.png → images/servers/pv_remastered.png
diff --git a/static/images/4k/tvl2014.png → images/servers/tvl2014.png b/static/images/4k/tvl2014.png → images/servers/tvl2014.png
diff --git a/justfile b/justfile
@@ -2,21 +2,37 @@ build:
     mkdir -p out
     cp -r static/* out/
     just render-all
-    mkdir -p out/images/thumbs/
-    just build-thumbs
 
 clean:
     rm -fr out/*
 
 dev:
     watchexec --ignore out -- "just clean; just build"
 
-build-thumbs:
-    for image in out/images/4k/*.png; do \
-        magick \
-            -define png:size=512x512 $image \
-            -thumbnail 256x256^ -gravity center -extent 256x256 \
-            $(echo $image | sed "s#4k#thumbs#"); \
+build-images:
+    #!/usr/bin/env sh
+
+    for image in images/servers/*.png; do
+        image_file_name=$(basename -- "$image");
+        image_name="${image_file_name%.*}";
+        echo "building image $image_name...";
+
+        for format in {jpg,webp}; do
+            for size in {1280x720,1920x1080,3840x2160}; do
+                mkdir -p "static/images/$size/";
+                magick "$image" -resize $size "static/images/$size/$image_name.$format";
+            done;
+
+            for size in {256x256,512x512}; do
+                mkdir -p "static/images/thumbs/$size/";
+
+                magick \
+                    -define png:size=512x512 "$image" \
+                    -thumbnail "$size^" -gravity center -extent "$size"  \
+                    "static/images/thumbs/$size/$image_name.$format";
+            done;
+
+        done;
     done
 
 render-server server:

diff --git a/static/.gitignore b/static/.gitignore
@@ -0,0 +1 @@
+images
diff --git a/static/main.css b/static/main.css
@@ -48,6 +48,13 @@ section h2 {
 }
 
 section.hero {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    background-color: rgba(0, 0, 0, 0.25);
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-attachment: fixed;
@@ -58,10 +65,6 @@ section.hero {
     margin: 0;
     padding: 10%;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
     color: white;
     font-size: 1em;
 }
@@ -72,6 +75,21 @@ section.hero {
     }
 }
 
+section.hero .background {
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+
+section.hero .background img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 section.hero h1 {
     font-family: "Montserrat", sans-serif;
     font-optical-sizing: auto;
@@ -102,11 +120,14 @@ section.cards {
 
 section.cards .card {
     display: flex;
+    overflow: hidden;
+    position: relative;
     flex-direction: column;
     justify-content: end;
     aspect-ratio: 1/1;
     padding: 15px;
 
+    background-color: rgba(0, 0, 0, 0.25);
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: cover;
@@ -136,6 +157,20 @@ section.cards .card {
     }
 }
 
+section.cards .card .background {
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+
+section.cards .card .background img {
+    width: 100%;
+    height: 100%;
+}
+
 section.cards .card .title {
     font-weight: 700;
 }

diff --git a/templates/_layout.jinja b/templates/_layout.jinja
@@ -16,8 +16,20 @@
 </head>
 
 <body>
-    <section class="hero"
-        style="background-image: linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ), url(/images/4k/{{ hero.background }}.png);">
+    <section class="hero">
+        <picture class="background">
+            <source srcset="
+                /images/1280x720/{{ hero.background }}.webp 1280w,
+                /images/1920x1080/{{ hero.background }}.webp 1920w,
+                /images/3840x2160/{{ hero.background }}.webp 3840w" type="image/webp" />
+            <source srcset="
+                /images/1280x720/{{ hero.background }}.jpg 1280w,
+                /images/1920x1080/{{ hero.background }}.jpg 1920w,
+                /images/3840x2160/{{ hero.background }}.jpg 3840w" type="image/jpeg" />
+
+            <img src="/images/1920x1080/{{ hero.background }}.jpg" />
+        </picture>
+
         <div>
             <h1>{{ hero.title }}</h1>
             <h2>{{ hero.subtext }}</h2>
@@ -27,7 +39,7 @@
 
     {% block content %}{% endblock %}
 
-    <!-- Start Open Web Analytics Tracker -->
+    {# <!-- Start Open Web Analytics Tracker -->
     <script type="text/javascript">
         //<![CDATA[
         var owa_baseUrl = 'https://owa.bxbservers.com/';
@@ -44,7 +56,7 @@
         }());
         //]]>
     </script>
-    <!-- End Open Web Analytics Code -->
+    <!-- End Open Web Analytics Code --> #}
 </body>
 
 </html>
diff --git a/templates/index.jinja b/templates/index.jinja
@@ -7,10 +7,22 @@
 } %}
 
 {% block content %}
+<style>
+</style>
+
 <section class="cards">
     {% for server in servers %}
-    <a class="card" href="/{{ server.path }}/"
-        style="background-image: linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ), url(/images/thumbs/{{ server.thumbnail }}.png);">
+    <a class="card" href="/{{ server.path }}/">
+        <picture class="background">
+            <source srcset="
+                /images/thumbs/256x256/{{ server.thumbnail }}.webp 256w,
+                /images/thumbs/512x512/{{ server.thumbnail }}.webp 512w" type="image/webp" />
+            <source srcset="
+                /images/thumbs/256x256/{{ server.thumbnail }}.jpg 256w,
+                /images/thumbs/512x512/{{ server.thumbnail }}.jpg 512w" type="image/jpeg" />
+            <img src="/images/thumbs/{{ server.thumbnail }}.jpg" />
+        </picture>
+
         <span class="title">{{ server.name }}</span>
         <span class="subtext">{{ server.date }}</span>
     </a>

diff --git a/todos b/todos
@@ -2,8 +2,8 @@
 ☐ screenshots and videos on server pages
 ☐ misc (unknown server/unrelated to a specific server) pages
 ☐ call to action on index and server pages
-☐ support multiple background image sizes and formats
-☐ compress images
+✔ support multiple background image sizes and formats @done(24-11-03 17:23)
+✔ compress images @done(24-11-03 17:23)
 ☐ redo all the background images (except maybe pv1?)
 ☐ check pv remastered is actually remastered not reloaded and i just named it wrong
 ✔ max width on server name (pvrem) (or just some amount of padding) @done(24-11-03 14:54)