feat(champion-skin): Improve skin image URL handling

- Refactored the `getSkinImageAttribute` method in ChampionSkin model to accept a boolean parameter for uncentered images.
- Updated references to `getSkinImageAttribute` in ChampionSkinController and blade files to include the new parameter for uncentered images.
This commit is contained in:
Rico van Zelst
2024-04-14 14:29:30 +02:00
parent 0fb2b967fb
commit 29e102e8bb
4 changed files with 10 additions and 6 deletions

View File

@@ -63,7 +63,7 @@ class ChampionSkinController extends Controller
$splashColor = Cache::remember(
'championSkinSplashColorCache'.$championSkin->slug,
60 * 60 * 120,
static fn () => getAverageColorFromImageUrl('https://wsrv.nl/?url='.$championSkin->getSkinImageAttribute())
static fn () => getAverageColorFromImageUrl('https://wsrv.nl/?url=' . $championSkin->getSkinImageAttribute(true))
);
$skin->splash_color = $splashColor;

View File

@@ -72,9 +72,13 @@ class ChampionSkin extends Model
return $this->hasMany(SkinChroma::class, 'full_skin_id', 'full_skin_id');
}
public function getSkinImageAttribute(): string
public function getSkinImageAttribute(bool $uncentered = false): string
{
return 'https://raw.communitydragon.org/pbe/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/'.$this->champion_id.'/'.$this->full_skin_id.'.jpg';
$baseUrl = 'https://raw.communitydragon.org/pbe/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/';
$imagePath = $uncentered ? 'uncentered/' : '';
$imageUrl = $baseUrl . $imagePath . $this->champion_id . '/' . $this->full_skin_id . '.jpg';
return $imageUrl;
}
public function getSkinImageLoadingAttribute(): string

View File

@@ -120,7 +120,7 @@
@foreach ($champion->skins as $key => $skin)
<div class="flex flex-col group">
<a href="/skin/{{ $skin->slug }}">
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70&il"
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=450&output=webp&q=70&il"
alt="{{ $champion->name }} {{ $skin->name }} Splash Art"
@if ($key < 6) loading="eager" @else loading="lazy" @endif
class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10 hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">

View File

@@ -25,12 +25,12 @@
class="relative border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80 lg:col-span-2">
<div class="absolute inset-0 aspect-video glow-shadow rounded-2xl"
style="--splash-color: {{$skin->splash_color}}"></div>
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=840&output=webp&q=70"
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=840&output=webp&q=90"
alt="{{$skin->skin_name}} Splash Art"
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 rounded-2xl">
<div class="absolute bottom-0 left-0 p-4">
<a href="{{ $skin->getSkinImageAttribute() }}" rel="noopener" target="_blank"
<a href="{{ $skin->getSkinImageAttribute(true) }}" rel="noopener" target="_blank"
class="p-2 text-base font-bold text-white bg-black bg-opacity-50 rounded-xl">View in
HD</a>
</div>