Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2026-02-04 03:33:13 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(seo): add image dimensions and aspect-ratio handling

Browse Source
This commit is contained in:
Rico
2026-01-07 20:06:17 +01:00
parent cf08d2b3bb
commit e4d3a32558
4 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/css/app.css
View File

@@ -129,3 +129,16 @@ ins.adsbygoogle[data-ad-status="unfilled"] {
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
} }
.prose img {
height: auto;
max-width: 100%;
}
.prose img:not([width]):not([height]) {
aspect-ratio: attr(width) / attr(height);
}
.prose img[width][height] {
aspect-ratio: attr(width) / attr(height);
}

2
resources/views/components/icons/list_all.blade.php
View File

@@ -20,7 +20,7 @@
<a href="/icon/{{ $icon->slug }}"> <a href="/icon/{{ $icon->slug }}">
<img @if ($key < 8) loading="eager" @else loading="lazy" @endif <img @if ($key < 8) loading="eager" @else loading="lazy" @endif
src="//wsrv.nl/?url={{ $icon->image }}&w=200&output=webp&q=50&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png" src="//wsrv.nl/?url={{ $icon->image }}&w=200&output=webp&q=50&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
class="object-cover w-full h-full" alt="{{ $icon->title }} Icon" /></a> class="object-cover w-full h-full" alt="{{ $icon->title }} Icon" width="96" height="96" /></a>
</div> </div>
<div class="px-4 py-2"> <div class="px-4 py-2">

2
resources/views/components/posts/listposts.blade.php
View File

@@ -12,6 +12,8 @@
src="{{ $post->thumbnail }}" src="{{ $post->thumbnail }}"
alt="{{ $post->title }} Thumbnail" alt="{{ $post->title }} Thumbnail"
class="object-cover w-full h-full" class="object-cover w-full h-full"
width="1200"
height="630"
> >
</a> </a>

6
resources/views/posts/show.blade.php
View File

@@ -97,7 +97,9 @@
<img src="{{ $post->thumbnail }}" <img src="{{ $post->thumbnail }}"
alt="{{ $post->title }}" alt="{{ $post->title }}"
class="object-cover w-full h-full transition duration-700 transform hover:scale-105" class="object-cover w-full h-full transition duration-700 transform hover:scale-105"
loading="eager"> loading="eager"
width="1920"
height="1080">
</div> </div>
@endif @endif
</header> </header>
@@ -160,7 +162,7 @@
<a href="{{ route('posts.show', $relatedPost->slug) }}" class="flex flex-col h-full group"> <a href="{{ route('posts.show', $relatedPost->slug) }}" class="flex flex-col h-full group">
<div class="overflow-hidden relative mb-4 w-full rounded-xl border transition-all aspect-video bg-stone-800 border-stone-700 group-hover:border-orange-500/50"> <div class="overflow-hidden relative mb-4 w-full rounded-xl border transition-all aspect-video bg-stone-800 border-stone-700 group-hover:border-orange-500/50">
@if($relatedPost->thumbnail) @if($relatedPost->thumbnail)
<img src="{{ $relatedPost->thumbnail }}" alt="{{ $relatedPost->title }}" class="object-cover w-full h-full transition duration-500 group-hover:scale-105"> <img src="{{ $relatedPost->thumbnail }}" alt="{{ $relatedPost->title }}" class="object-cover w-full h-full transition duration-500 group-hover:scale-105" width="1920" height="1080">
@else @else
<div class="flex justify-center items-center w-full h-full bg-gradient-to-br from-stone-800 to-stone-900 text-stone-700"> <div class="flex justify-center items-center w-full h-full bg-gradient-to-br from-stone-800 to-stone-900 text-stone-700">
<span class="text-4xl opacity-20">LoL</span> <span class="text-4xl opacity-20">LoL</span>