From 288bbc750d7753587e836a29bc79305867b119c1 Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Sat, 27 Sep 2025 11:56:46 +0200
Subject: [PATCH] feat(images): add default image placeholders

---
 resources/views/components/home/recent_skins.blade.php |  2 +-
 .../views/components/home/upcoming_skins.blade.php     |  2 +-
 resources/views/components/skins/grid_info.blade.php   | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/views/components/home/recent_skins.blade.php b/resources/views/components/home/recent_skins.blade.php
index e924bd4..9a10162 100644
--- a/resources/views/components/home/recent_skins.blade.php
+++ b/resources/views/components/home/recent_skins.blade.php
@@ -24,7 +24,7 @@
                             <div class="flex flex-col items-center justify-center">
                                 <a href="{{ route('skins.show', $skin->slug) }}">
                                     <img loading="lazy" class="h-full border-2 w-80 border-orange-400/40 rounded-xl"
-                                        src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=480&output=webp&q=75&maxage=7d"
+                                        src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=480&output=webp&q=75&maxage=7d&default=i.ibb.co/xt3D5LMt/heimerdingerlol-placeholder.webp"
                                         alt="{{ $skin->skin_name }} Splash Art">
                                 </a>
                                 <div class="flex flex-col items-center justify-center">
diff --git a/resources/views/components/home/upcoming_skins.blade.php b/resources/views/components/home/upcoming_skins.blade.php
index f32f1b4..502b3e0 100644
--- a/resources/views/components/home/upcoming_skins.blade.php
+++ b/resources/views/components/home/upcoming_skins.blade.php
@@ -27,7 +27,7 @@
                         <div class="flex flex-col items-center justify-center">
                             <a href="{{ route('skins.show', $skin->slug) }}">
                                 <img loading="lazy" class="h-full border-2 w-80 border-orange-400/40 rounded-xl"
-                                    src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=480&output=webp&q=75&maxage=2d"
+                                    src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=480&output=webp&q=75&maxage=2d&default=i.ibb.co/xt3D5LMt/heimerdingerlol-placeholder.webp"
                                     alt="{{ $skin->skin_name }} Splash Art">
                             </a>
                             <div class="flex flex-col items-center justify-center">
diff --git a/resources/views/components/skins/grid_info.blade.php b/resources/views/components/skins/grid_info.blade.php
index cbfa3b3..7a08ffe 100644
--- a/resources/views/components/skins/grid_info.blade.php
+++ b/resources/views/components/skins/grid_info.blade.php
@@ -29,14 +29,14 @@
 
             <!-- Splash Art -->
             <div class="relative w-full" style="aspect-ratio: 1278/348;">
-                <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=30&h=8&fit=cover&blur=5&output=webp"
+                <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=30&h=8&fit=cover&blur=5&output=webp&default=i.ibb.co/xt3D5LMt/heimerdingerlol-placeholder.webp"
                     class="absolute inset-0 object-cover w-full h-full blur-sm" alt="{{ $skin->skin_name }} Loading"
                     width="1278" height="348" />
 
-                <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=218&fit=cover&output=webp&q=85"
-                    srcset="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=480&h=131&fit=cover&output=webp&q=85 480w,
-                //wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=218&fit=cover&output=webp&q=85 800w,
-                //wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=1280&h=348&fit=cover&output=webp&q=90 1280w"
+                <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=218&fit=cover&output=webp&q=85&default=i.ibb.co/xt3D5LMt/heimerdingerlol-placeholder.webp"
+                    srcset="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=480&h=131&fit=cover&output=webp&q=85&default=i.ibb.co/xt3D5LMt/heimerdingerlol-placeholder.webp 480w,
+                //wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=218&fit=cover&output=webp&q=85&default=i.ibb.co/xt3D5LMt/heimerdingerlol-placeholder.webp 800w,
+                //wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=1280&h=348&fit=cover&output=webp&q=90&default=i.ibb.co/xt3D5LMt/heimerdingerlol-placeholder.webp 1280w"
                     sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1280px"
                     class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100"
                     alt="{{ $skin->skin_name }} Splash Art" loading="eager" fetchpriority="high" width="1278"