From 88a7ba0b3b967925f7662490dba56e5bfbf69e1e Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Thu, 9 Nov 2023 12:42:03 +0100
Subject: [PATCH] fix: optimize home images

---
 app/Models/ChampionSkin.php                        |  5 +++++
 .../views/components/home/recent_skins.blade.php   |  3 ++-
 .../views/components/home/upcoming_skins.blade.php |  2 +-
 .../views/components/skins/paginatedlist.blade.php | 14 ++++++++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/Models/ChampionSkin.php b/app/Models/ChampionSkin.php
index 39649af..b0b263e 100644
--- a/app/Models/ChampionSkin.php
+++ b/app/Models/ChampionSkin.php
@@ -49,6 +49,11 @@ class ChampionSkin extends Model
         ];
     }
 
+    public function getRouteKeyName(): string
+    {
+        return 'slug';
+    }
+
     public function getRarityAttribute($value)
     {
         return $value === null || $value === 'NoRarity' ? 'Common' : $value;
diff --git a/resources/views/components/home/recent_skins.blade.php b/resources/views/components/home/recent_skins.blade.php
index 93c7cd4..a01986e 100644
--- a/resources/views/components/home/recent_skins.blade.php
+++ b/resources/views/components/home/recent_skins.blade.php
@@ -22,7 +22,8 @@
                         <div class="flex flex-col">
                             <div class="flex flex-col items-center justify-center">
                                 <img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
-                                     src="{{ $skin->getSkinImageAttribute() }}" alt="{{ $skin->skin_name }} Splash Art">
+                                     src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
+                                     alt="{{ $skin->skin_name }} Splash Art">
                                 <div class="flex flex-col items-center justify-center">
                                     <h2 class="mt-4 text-xl font-bold text-white">{{ $skin->skin_name }}</h2>
                                     <h3 class=" text-stone-200">Released
diff --git a/resources/views/components/home/upcoming_skins.blade.php b/resources/views/components/home/upcoming_skins.blade.php
index fb580f5..745c664 100644
--- a/resources/views/components/home/upcoming_skins.blade.php
+++ b/resources/views/components/home/upcoming_skins.blade.php
@@ -21,7 +21,7 @@
                     <div class="flex flex-col">
                         <div class="flex flex-col items-center justify-center">
                             <img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
-                                 src="{{ $skin->getSkinImageAttribute() }}"
+                                 src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
                                  alt="{{ $skin->skin_name }} Splash Art">
                             <div class="flex flex-col items-center justify-center">
                                 <h2 class="mt-4 text-xl font-bold text-white">{{ $skin->skin_name }}</h2>
diff --git a/resources/views/components/skins/paginatedlist.blade.php b/resources/views/components/skins/paginatedlist.blade.php
index fd122a1..d8976b4 100644
--- a/resources/views/components/skins/paginatedlist.blade.php
+++ b/resources/views/components/skins/paginatedlist.blade.php
@@ -34,6 +34,20 @@
                             <span class="text-xs text-stone-300">{{$skin->rarity}}</span>
                         </div>
                     </div>
+                    @if($skin->associated_skinline != null)
+                        <div class="mb-5 px-4 flex justify-center">
+                            @foreach($skin->associated_skinline as $skinline)
+                                <span class="sr-only">Associated Skinline:</span>
+                                <span
+                                    class="my-2 bg-orange-100 text-orange-800 text-xs font-medium
+                                            mr-2 px-2.5 py-0.5 rounded
+                                            border border-orange-300
+                                            ">
+                                            {{$skinline}}</span>
+                            @endforeach
+                        </div>
+                    @endif
+
                 </div>
             @endforeach
         </div>