truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize images to WebP and enable lazy loading. Add security headers (HSTS, CSP, etc) for A+ SSL score.

Browse Source
This commit is contained in:
Muhammet Güler
2026-02-17 10:30:36 +03:00
parent 7101f7878a
commit 477993ec83
743 changed files with 927 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/blog/index.blade.php
+4 -4
View File
@@ -29,7 +29,7 @@
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b1.jpg');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b1.webp');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
$authorName = $post->author ? $post->author->name : '';
@@ -42,7 +42,7 @@
@if($post->featured_image_url)
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
@@ -118,7 +118,7 @@
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b4.jpg');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b4.webp');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
@endphp
@@ -127,7 +127,7 @@
<div class="card">
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
resources/views/blog/show.blade.php
+8 -8
View File
@@ -54,7 +54,7 @@
<div class="card">
@if($post->featured_image_url)
<figure class="card-img-top">
<img src="{{ $post->featured_image_url }}" alt="{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}">
<img loading="lazy" src="{{ $post->featured_image_url }}" alt="{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}">
</figure>
@endif
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
@@ -112,9 +112,9 @@
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
@if($post->author->avatar)
<img class="rounded-[50%]" alt="image" src="{{ asset('storage/' . $post->author->avatar) }}">
<img loading="lazy" class="rounded-[50%]" alt="image" src="{{ asset('storage/' . $post->author->avatar) }}">
@else
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u5.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u5.webp') }}" loading="lazy">
@endif
</figure>
<div>
@@ -174,7 +174,7 @@
@php
$relatedTitle = method_exists($relatedPost, 'translate') ? $relatedPost->translate('title') : $relatedPost->title;
$relatedCategoryName = $relatedPost->category ? $relatedPost->category->name : '';
$relatedImageUrl = $relatedPost->featured_image ? asset('storage/' . $relatedPost->featured_image) : asset('assets/img/photos/b4.jpg');
$relatedImageUrl = $relatedPost->featured_image ? asset('storage/' . $relatedPost->featured_image) : asset('assets/img/photos/b4.webp');
$relatedUrl = route('blog.show', $relatedPost->slug);
$relatedDate = $relatedPost->published_at ? $relatedPost->published_at->format('d M Y') : $relatedPost->created_at->format('d M Y');
$relatedCommentCount = $relatedPost->comments_count ?? 0;
@@ -183,7 +183,7 @@
<article>
<figure class="overlay overlay-1 hover-scale group rounded !mb-5">
<a href="{{ $relatedUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $relatedImageUrl }}" alt="{{ $relatedTitle }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $relatedImageUrl }}" alt="{{ $relatedTitle }}" loading="lazy">
<span class="bg"></span>
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
@@ -243,7 +243,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u1.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u1.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
@@ -276,7 +276,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u3.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u3.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
@@ -309,7 +309,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u2.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u2.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">