fix: optimize home images

This commit is contained in:
Rico van Zelst
2023-11-09 12:42:03 +01:00
parent 6eb8a68f9b
commit 88a7ba0b3b
4 changed files with 22 additions and 2 deletions

View File

@@ -49,6 +49,11 @@ class ChampionSkin extends Model
]; ];
} }
public function getRouteKeyName(): string
{
return 'slug';
}
public function getRarityAttribute($value) public function getRarityAttribute($value)
{ {
return $value === null || $value === 'NoRarity' ? 'Common' : $value; return $value === null || $value === 'NoRarity' ? 'Common' : $value;

View File

@@ -22,7 +22,8 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<img loading="lazy" class="border-2 border-orange-400/40 rounded-xl" <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"> <div class="flex flex-col items-center justify-center">
<h2 class="mt-4 text-xl font-bold text-white">{{ $skin->skin_name }}</h2> <h2 class="mt-4 text-xl font-bold text-white">{{ $skin->skin_name }}</h2>
<h3 class=" text-stone-200">Released <h3 class=" text-stone-200">Released

View File

@@ -21,7 +21,7 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<img loading="lazy" class="border-2 border-orange-400/40 rounded-xl" <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"> alt="{{ $skin->skin_name }} Splash Art">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<h2 class="mt-4 text-xl font-bold text-white">{{ $skin->skin_name }}</h2> <h2 class="mt-4 text-xl font-bold text-white">{{ $skin->skin_name }}</h2>

View File

@@ -34,6 +34,20 @@
<span class="text-xs text-stone-300">{{$skin->rarity}}</span> <span class="text-xs text-stone-300">{{$skin->rarity}}</span>
</div> </div>
</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> </div>
@endforeach @endforeach
</div> </div>