mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
feat(icon-info): full page redesign
This commit is contained in:
Rico van Zelst
@@ -11,7 +11,7 @@ class SummonerIconController extends Controller
|
|||||||
public function index()
|
public function index()
|
||||||
{
|
{
|
||||||
$icons = QueryBuilder::for(SummonerIcon::class)
|
$icons = QueryBuilder::for(SummonerIcon::class)
|
||||||
->allowedFilters('title')
|
->allowedFilters(['title', 'esports_team', 'release_year'])
|
||||||
->defaultSort('-icon_id')
|
->defaultSort('-icon_id')
|
||||||
->paginate(72)
|
->paginate(72)
|
||||||
->appends(request()->query());
|
->appends(request()->query());
|
||||||
|
|||||||
@@ -1,111 +1,356 @@
|
|||||||
<section class="min-h-[80vh] flex items-center justify-center">
|
<section class="max-w-screen-xl mx-auto mt-12">
|
||||||
<div class="items-center justify-center mx-auto my-auto align-middle">
|
<h3
|
||||||
<h3
|
class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||||
class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
Icon Spotlight
|
||||||
ICON DETAILS</h3>
|
</h3>
|
||||||
<h1
|
<h1
|
||||||
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||||
{{ $icon->title }}</h1>
|
{{ $icon->title }}
|
||||||
<h2
|
</h1>
|
||||||
class="text-sm font-bold text-center text-transparent uppercase md:text-lg bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
<h2
|
||||||
Released in: {{ $icon->release_year }}</h2>
|
class="text-sm font-bold text-center text-transparent uppercase md:text-lg bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||||
|
Released in {{ $icon->release_year }}
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div class="flex justify-center my-4">
|
<x-ads.common />
|
||||||
<x-ads.horizontal-banner />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container flex items-center justify-center p-4 mx-auto my-auto mt-3">
|
<div class="container mx-auto mt-8">
|
||||||
<div class="grid w-screen grid-cols-1 gap-8 md:grid-cols-2">
|
<div class="relative p-6 overflow-hidden border shadow-md rounded-2xl bg-stone-800/40 border-neutral-300/5">
|
||||||
<div
|
<div class="flex flex-col items-center gap-8 md:flex-row md:items-start">
|
||||||
class="flex flex-col items-center align-middle border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80">
|
<div class="flex flex-col items-center flex-shrink-0">
|
||||||
<h4 class="text-center text-2xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mb-3">
|
<div class="mb-3 transition-all duration-500 group">
|
||||||
The {{ $icon->title }}</h4>
|
<div class="relative w-64 h-64" style="aspect-ratio: 1/1;">
|
||||||
<img src="//wsrv.nl/?url={{ $icon->image }}&w=400&output=webp&q=100&il"
|
<div
|
||||||
alt="{{ $icon->title }} Icon"
|
class="absolute inset-0 transition-opacity duration-300 opacity-0 bg-gradient-to-br from-orange-400/20 to-orange-500/30 rounded-2xl group-hover:opacity-100">
|
||||||
class="transition-transform duration-700 border-2 shadow-md rounded-2xl bg-clip-border border-orange-400/40 shadow-orange-400/20" />
|
</div>
|
||||||
|
|
||||||
|
<img src="//wsrv.nl/?url={{ $icon->image }}&w=20&h=20&output=webp&q=30&blur=5"
|
||||||
|
alt="{{ $icon->title }} Loading"
|
||||||
|
class="absolute inset-0 object-cover w-full h-full rounded-2xl" width="256"
|
||||||
|
height="256" />
|
||||||
|
|
||||||
|
<img src="//wsrv.nl/?url={{ $icon->image }}&w=256&output=webp&q=80"
|
||||||
|
srcset="//wsrv.nl/?url={{ $icon->image }}&w=128&output=webp&q=80 128w,
|
||||||
|
//wsrv.nl/?url={{ $icon->image }}&w=256&output=webp&q=80 256w,
|
||||||
|
//wsrv.nl/?url={{ $icon->image }}&w=512&output=webp&q=85 512w"
|
||||||
|
sizes="(max-width: 768px) 128px, 256px" alt="{{ $icon->title }} Icon" loading="eager"
|
||||||
|
width="256" height="256"
|
||||||
|
class="relative z-10 object-contain w-full h-full transition-transform duration-500 border-2 shadow-lg rounded-2xl bg-clip-border border-orange-400/40 shadow-orange-400/20 group-hover:scale-105" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<a href="{{ $icon->image }}" rel="noopener" target="_blank"
|
<a href="{{ $icon->image }}" rel="noopener" target="_blank"
|
||||||
class="px-4 py-2 text-sm font-medium text-center text-neutral-100">
|
class="inline-flex items-center px-3 py-1 text-sm font-bold text-white transition bg-orange-500 rounded-lg bg-opacity-80 hover:bg-opacity-100">
|
||||||
View in HD
|
<span>View Full Size</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||||
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80">
|
<div class="flex-grow">
|
||||||
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
|
<h3
|
||||||
{{ $icon->title }} Details
|
class="mb-4 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||||
</h4>
|
About This Icon
|
||||||
<div class="flex flex-col justify-between h-max">
|
</h3>
|
||||||
<ul class="flex-1 mx-5 h-max">
|
<div class="space-y-4 text-lg leading-relaxed text-neutral-100">
|
||||||
<li class="items-center text-base leading-loose text-neutral-100 hyphens-auto"
|
<p>
|
||||||
lang="en">
|
The <strong>{{ $icon->title }}</strong> is a {{ $icon->legacy ? 'legacy' : 'standard' }}
|
||||||
<span class="font-bold">Icon ID:</span>
|
summoner icon first introduced to League of Legends in {{ $icon->release_year }}.
|
||||||
<span class="font-mono font-semibold">{{ $icon->icon_id }}</span>
|
|
||||||
</li>
|
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
|
||||||
lang="en">
|
|
||||||
<span class="font-bold">Icon Name:</span> {{ $icon->title }}
|
|
||||||
</li>
|
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
|
||||||
lang="en">
|
|
||||||
<span class="font-bold">Release Year:</span> {{ $icon->release_year }}
|
|
||||||
</li>
|
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
|
||||||
lang="en">
|
|
||||||
<span class="font-bold">Legacy<span class="font-extralight">*</span>:</span>
|
|
||||||
{{ $icon->legacy ? 'Yes' : 'No' }}
|
|
||||||
</li>
|
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
|
||||||
lang="en">
|
|
||||||
<span class="font-bold">Esports Icon:</span>
|
|
||||||
{{ $icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No' }}
|
|
||||||
</li>
|
|
||||||
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
||||||
|
This is an esports-themed icon
|
||||||
@if ($icon->esports_team)
|
@if ($icon->esports_team)
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
representing the team <strong>{{ $icon->esports_team }}</strong>
|
||||||
lang="en">
|
|
||||||
<span class="font-bold">Esports Team:</span> {{ $icon->esports_team }}
|
|
||||||
</li>
|
|
||||||
@endif
|
@endif
|
||||||
@if ($icon->esports_region)
|
@if ($icon->esports_region)
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
from the <strong>{{ $icon->esports_region }}</strong> region
|
||||||
lang="en">
|
|
||||||
<span class="font-bold">Esports Region:</span> {{ $icon->esports_region }}
|
|
||||||
</li>
|
|
||||||
@endif
|
@endif
|
||||||
@if ($icon->esports_event)
|
@if ($icon->esports_event)
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
featured during the <strong>{{ $icon->esports_event }}</strong> event
|
||||||
lang="en">
|
@endif.
|
||||||
<span class="font-bold">Esports Event:</span> {{ $icon->esports_event }}
|
|
||||||
</li>
|
|
||||||
@endif
|
|
||||||
@endif
|
@endif
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
</p>
|
||||||
lang="en">
|
|
||||||
<span class="font-bold">Description:</span> {{ $icon->description }}
|
|
||||||
</li>
|
|
||||||
|
|
||||||
@if ($icon->icon_id === 6584)
|
<p>{{ $icon->description }}</p>
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
|
||||||
lang="en">
|
<p>
|
||||||
<span class="font-bold">Guide:</span> <a
|
Summoner icons like the {{ $icon->title }} let you personalize your League of
|
||||||
href="https://heimerdinger.lol/post/how-to-get-hatty-crabby-icon-in-league-of-legends"
|
Legends account, displaying next to your name in friend lists, lobbies, and post-game
|
||||||
class="underline hover:text-orange-400 decoration-orange-400">How to get the
|
screens.
|
||||||
Hatty Crabby Icon in
|
It's also generally shown on 3rd-party sites like op.gg and u.gg.
|
||||||
League of Legends</a>
|
They're a popular way for players to express their personality, support for
|
||||||
</li>
|
teams or to create a nice looking profile for themselves.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
@if ($icon->release_year < 2016)
|
||||||
|
This icon comes from the {{ $icon->release_year < 2013 ? 'early' : 'classic' }} era of
|
||||||
|
League of Legends, when icon releases were less frequent and often tied to significant
|
||||||
|
game events or milestones. Icons from this period are particularly valued by long-time
|
||||||
|
players.
|
||||||
|
@elseif ($icon->release_year >= 2016 && $icon->release_year <= 2020)
|
||||||
|
Released during {{ $icon->release_year }}, this icon arrived during a period when Riot
|
||||||
|
began expanding the variety and availability of summoner icons, offering more ways for
|
||||||
|
players to customize their profiles and express themselves in the game client.
|
||||||
|
@else
|
||||||
|
As a more recent addition to League's icon collection, the {{ $icon->title }} features
|
||||||
|
the modern design aesthetic that matches Riot's current approach to player
|
||||||
|
customization.
|
||||||
@endif
|
@endif
|
||||||
|
</p>
|
||||||
|
|
||||||
<li class="items-center mt-8 text-sm font-light leading-loose text-neutral-100 hyphens-auto"
|
@if ($icon->legacy)
|
||||||
lang="en">
|
<div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
|
||||||
<span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy
|
<p class="text-base text-neutral-200">
|
||||||
skins.
|
<span class="font-bold text-orange-400">Legacy Status:</span> This is considered a
|
||||||
It seems like some icons that are marked as legacy are still obtainable or the other way
|
legacy icon, which means it may have limited availability. Unlike legacy skins,
|
||||||
around
|
legacy icons don't follow consistent rules. Some can still be obtainable through
|
||||||
where some icons that are not marked as legacy are not obtainable anymore.
|
special events or promotions, while others might be permanently unavailable.
|
||||||
</li>
|
</p>
|
||||||
</ul>
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
@if ($icon->icon_id === 6584)
|
||||||
|
<div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
|
||||||
|
<p class="text-base font-medium text-neutral-100">
|
||||||
|
<span class="font-bold text-orange-400">Special Guide:</span> Wondering how to get
|
||||||
|
this icon? Check out our
|
||||||
|
href="/post/how-to-get-hatty-crabby-icon-in-league-of-legends"
|
||||||
|
class="text-orange-400 underline hover:text-orange-300">complete guide on
|
||||||
|
obtaining the Hatty Crabby Icon</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
@if ($icon->icon_id === 6846)
|
||||||
|
<div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
|
||||||
|
<p class="text-base font-medium text-neutral-100">
|
||||||
|
<span class="font-bold text-orange-400">Special Guide:</span> Wondering how to get
|
||||||
|
this icon? Check out our <a href="/post/how-to-get-ez-be-real-icon"
|
||||||
|
class="text-orange-400 underline hover:text-orange-300">complete guide on
|
||||||
|
obtaining the Ez-be-real Icon</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-6 mt-8 md:grid-cols-2">
|
||||||
|
<div class="p-6 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||||
|
<h3 class="mb-4 text-xl font-bold text-orange-400">
|
||||||
|
How to Obtain
|
||||||
|
</h3>
|
||||||
|
<div class="text-neutral-100">
|
||||||
|
<p>
|
||||||
|
@if ($icon->legacy)
|
||||||
|
As a legacy icon from {{ $icon->release_year }}, the {{ $icon->title }} icon might not be
|
||||||
|
directly available for purchase. Legacy icons typically appear during special events,
|
||||||
|
promotions, or through hextech crafting.
|
||||||
|
|
||||||
|
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
||||||
|
Since this is an esports icon, it may reappear during relevant tournaments or team
|
||||||
|
promotions.
|
||||||
|
@endif
|
||||||
|
@else
|
||||||
|
The {{ $icon->title }} icon, released in {{ $icon->release_year }}, may be available
|
||||||
|
through the League of Legends store, event passes, missions, or hextech crafting.
|
||||||
|
|
||||||
|
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
||||||
|
As an esports-themed icon, it's often available during relevant tournaments or through
|
||||||
|
team support bundles.
|
||||||
|
@endif
|
||||||
|
@endif
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-3">
|
||||||
|
When available in the store, summoner icons usually cost 250 RP, though
|
||||||
|
special or limited editions may be priced differently. Some icons are also obtainable with Blue
|
||||||
|
Essence during special promotions or through the Essence Emporium when it's active.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-3">
|
||||||
|
Riot occasionally brings back legacy content during special events like anniversaries, seasonal
|
||||||
|
celebrations, or game milestones. If you're specifically looking to add the {{ $icon->title }}
|
||||||
|
to your collection, watch for event announcements in the client or on the official <a
|
||||||
|
href="https://www.leagueoflegends.com/en-us/news/"
|
||||||
|
class="text-orange-400 underline hover:text-orange-300">League of
|
||||||
|
Legends</a> website.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-3">
|
||||||
|
Keep an eye on the in-game client for special promotions or events where this icon might become
|
||||||
|
available again.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="h-full p-6 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||||
|
<h3 class="mb-4 text-xl font-bold text-orange-400">
|
||||||
|
Technical Details
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-rows-[auto_1fr] text-neutral-100">
|
||||||
|
<p>
|
||||||
|
Each summoner icon in League of Legends has some technical specifications. The
|
||||||
|
{{ $icon->title }} is identified in Riot's systems by the icon ID <span
|
||||||
|
class="font-mono font-semibold">{{ $icon->icon_id }}</span>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="pt-4 mt-auto ">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="p-3 rounded-lg bg-stone-700/30">
|
||||||
|
<span class="block text-sm text-neutral-400">Icon ID</span>
|
||||||
|
<span class="font-mono font-medium">{{ $icon->icon_id }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3 rounded-lg bg-stone-700/30">
|
||||||
|
<span class="block text-sm text-neutral-400">Release Year</span>
|
||||||
|
<span>{{ $icon->release_year }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3 rounded-lg bg-stone-700/30">
|
||||||
|
<span class="block text-sm text-neutral-400">Legacy Status</span>
|
||||||
|
<span>{{ $icon->legacy ? 'Legacy' : 'Standard' }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3 rounded-lg bg-stone-700/30">
|
||||||
|
<span class="block text-sm text-neutral-400">Type</span>
|
||||||
|
<span>{{ $icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Esports' : 'Standard' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||||
|
<h3 class="mb-4 text-xl font-bold text-orange-400">
|
||||||
|
Design & Significance
|
||||||
|
</h3>
|
||||||
|
<div class="text-neutral-100">
|
||||||
|
<p>
|
||||||
|
The {{ $icon->title }} features a classic design that captures its thematic elements in League
|
||||||
|
of Legends' iconic art style. A lot of players like to use icons to make their profile look nice,
|
||||||
|
and match with profile backgrounds, borders, etc.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-3">
|
||||||
|
@if ($icon->esports_team)
|
||||||
|
As an esports team icon, it prominently displays {{ $icon->esports_team }}'s branding elements
|
||||||
|
and color scheme, allowing fans to show their support in the game client. Team icons often
|
||||||
|
become collectors' items, especially for teams with historical significance or memorable
|
||||||
|
tournament performances.
|
||||||
|
@elseif (strpos(strtolower($icon->title), 'poro') !== false)
|
||||||
|
This icon features League's beloved Poro character, the fluffy creature native to the Howling
|
||||||
|
Abyss. Poro-themed items are consistently popular among players due to their cute and whimsical
|
||||||
|
design aesthetic.
|
||||||
|
@elseif (strpos(strtolower($icon->title), 'champie') !== false ||
|
||||||
|
strpos(strtolower($icon->description), 'champie') !== false ||
|
||||||
|
strpos(strtolower($icon->title), 'illustration') !== false)
|
||||||
|
This champion-themed icon captures elements of a League character's identity, allowing fans of
|
||||||
|
that champion to showcase their preference or mastery.
|
||||||
|
@else
|
||||||
|
The art style and thematic elements of this icon reflect Riot's approach to visual design in
|
||||||
|
{{ $icon->release_year }}, with the characteristic attention to detail and distinctive style
|
||||||
|
that League of Legends is known for.
|
||||||
|
@endif
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-3">
|
||||||
|
Players often select icons that represent their main role, favorite champion, esports team they
|
||||||
|
like, or
|
||||||
|
just looks cool. The {{ $icon->title }} offers a way for summoners to personalize
|
||||||
|
their League experience and express themselves within the community.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||||
|
<h3 class="mb-4 text-xl font-bold text-orange-400">
|
||||||
|
Related Content
|
||||||
|
</h3>
|
||||||
|
<div class="text-neutral-100">
|
||||||
|
<p>
|
||||||
|
Interested in more summoner icons or related League of Legends content? Here are some resources that
|
||||||
|
might help:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="mt-3">
|
||||||
|
League of Legends has over 1500 summoner icons spanning more than a decade of the game's
|
||||||
|
history. They range from esports team icons to event commemorations, champion icons, and
|
||||||
|
ranked achievements.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<a href="/icons?filter%5Brelease_year%5D={{ $icon->release_year }}"
|
||||||
|
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
|
||||||
|
<h4 class="mb-2 font-semibold text-orange-400">Icons from {{ $icon->release_year }}</h4>
|
||||||
|
<p class="text-sm text-neutral-300">Explore other summoner icons released in the same year.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
@if ($icon->esports_team)
|
||||||
|
<a href="/icons?filter%5Besports_team%5D={{ urlencode($icon->esports_team) }}"
|
||||||
|
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
|
||||||
|
<h4 class="mb-2 font-semibold text-orange-400">{{ $icon->esports_team }} Icons</h4>
|
||||||
|
<p class="text-sm text-neutral-300">View all icons related to this esports team.</p>
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<a href="/icons"
|
||||||
|
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
|
||||||
|
<h4 class="mb-2 font-semibold text-orange-400">All Summoner Icons</h4>
|
||||||
|
<p class="text-sm text-neutral-300">Browse our complete collection of League of Legends icons.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
@push('bottom_scripts')
|
||||||
|
<script type="application/ld+json">
|
||||||
|
@php
|
||||||
|
$description = "The " . $icon->title . " is a " . ($icon->legacy ? 'legacy' : 'standard') . " summoner icon for League of Legends released in " . $icon->release_year . ".";
|
||||||
|
if ($icon->description) {
|
||||||
|
$description .= " " . $icon->description;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the JSON object
|
||||||
|
$jsonObject = [
|
||||||
|
"@context" => "https://schema.org/",
|
||||||
|
"@type" => "WebPage",
|
||||||
|
"name" => $icon->title . " - League of Legends Summoner Icon",
|
||||||
|
"description" => $description,
|
||||||
|
"mainEntity" => [
|
||||||
|
"@type" => "VisualArtwork",
|
||||||
|
"name" => $icon->title,
|
||||||
|
"description" => $description,
|
||||||
|
"image" => $icon->image,
|
||||||
|
"dateCreated" => $icon->release_year,
|
||||||
|
"artform" => "Digital Icon",
|
||||||
|
"artworkSurface" => "Digital",
|
||||||
|
"creator" => [
|
||||||
|
"@type" => "Organization",
|
||||||
|
"name" => "Riot Games"
|
||||||
|
],
|
||||||
|
"contentLocation" => [
|
||||||
|
"@type" => "Place",
|
||||||
|
"name" => "League of Legends"
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"publisher" => [
|
||||||
|
"@type" => "Organization",
|
||||||
|
"name" => "Heimerdinger.lol"
|
||||||
|
],
|
||||||
|
"url" => url()->current()
|
||||||
|
];
|
||||||
|
|
||||||
|
echo json_encode($jsonObject, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
|
||||||
|
@endphp
|
||||||
|
</script>
|
||||||
|
@endpush
|
||||||
|
|||||||
Reference in New Issue
Block a user