Add (lqip)

app/Http/Controllers/Front/HomeController.php

@@ -6,14 +6,11 @@
 use App\Models\Category;
 use App\Models\CountryLocale;
 use App\Models\Post;
-use Illuminate\Http\Request;
-
-use Artesaos\SEOTools\Facades\SEOTools;
-use Artesaos\SEOTools\Facades\SEOMeta;
-use Artesaos\SEOTools\Facades\OpenGraph;
-use Artesaos\SEOTools\Facades\JsonLd;
 use Artesaos\SEOTools\Facades\JsonLdMulti;
-
+use Artesaos\SEOTools\Facades\OpenGraph;
+use Artesaos\SEOTools\Facades\SEOMeta;
+use Artesaos\SEOTools\Facades\SEOTools;
+use Illuminate\Http\Request;
 
 class HomeController extends Controller
 {
@@ -24,8 +21,8 @@ public function index(Request $request)
         SEOTools::twitter();
         SEOTools::opengraph();
         SEOTools::jsonLd();
-      SEOTools::setTitle("Top Product Reviews, Deals & New Launches");
-      SEOTools::setDescription("Explore ProductAlert for in-depth product reviews and incredible deals. We cover Beauty, Tech, Home Appliances, Health & Fitness, Parenting, and more.");
+        SEOTools::setTitle('Top Product Reviews, Deals & New Launches');
+        SEOTools::setDescription('Explore ProductAlert for in-depth product reviews and incredible deals. We cover Beauty, Tech, Home Appliances, Health & Fitness, Parenting, and more.');
 
         $country = strtolower($request->session()->get('country'));
 
@@ -35,7 +32,6 @@ public function index(Request $request)
     public function country(Request $request, $country)
     {
 
-
         $country_locale = CountryLocale::where('slug', $country)->first();
 
         if (! is_null($country_locale)) {
@@ -67,7 +63,6 @@ public function country(Request $request, $country)
                 ->take(10)
                 ->get();
 
-
             SEOTools::metatags();
             SEOTools::twitter();
             SEOTools::opengraph();
@@ -124,7 +119,6 @@ public function countryCategory(Request $request, $country, $category)
 
         SEOTools::setDescription("Stay updated with the latest {$category_name} product launches in {$country_name}. Find in-depth reviews and exciting deals with ProductAlert, your guide to {$category_name} shopping.");
 
-
         return view('front.country_category', compact('country_locale', 'category', 'latest_posts'));
     }
 
@@ -163,7 +157,6 @@ public function post(Request $request, $country, $post_slug)
 
         if (! is_null($post)) {
 
-
             SEOMeta::setTitle($post->title);
             SEOMeta::setDescription($post->excerpt);
             SEOMeta::addMeta('article:published_time', $post->publish_date, 'property');
@@ -186,8 +179,7 @@ public function post(Request $request, $country, $post_slug)
                 ->addValue('dateCreated', $post->publish_at)
                 ->addValue('dateModified', $post->updated_at->format('Y-m-d'))
                 ->addValue('description', $post->excerpt)
-                    ->addValue('articleBody', trim(preg_replace('/\s\s+/', ' ', strip_tags($post->html_body))))
-                    ;
+                ->addValue('articleBody', trim(preg_replace('/\s\s+/', ' ', strip_tags($post->html_body))));
 
             return view('front.post', compact('post'));
         }

app/Models/Post.php

@@ -87,4 +87,15 @@ public function getHtmlBodyAttribute()
         return '';
 
     }
+
+    public function getFeaturedImageLqipAttribute()
+    {
+        $featuredImage = $this->featured_image;
+
+        // Get the extension of the original featured image
+        $extension = pathinfo($featuredImage, PATHINFO_EXTENSION);
+
+        // Append "_lqip" before the extension to create the LQIP image URL
+        return str_replace(".{$extension}", "_lqip.{$extension}", $featuredImage);
+    }
 }

config/seotools.php

@@ -9,7 +9,7 @@
          * The default configurations to be used by the meta generator.
          */
         'defaults' => [
-            'title' => "ProductAlert", // set false to total remove
+            'title' => 'ProductAlert', // set false to total remove
             'titleBefore' => false, // Put defaults.title before page title, like 'It's Over 9000! - Dashboard'
             'description' => 'Find top-rated product reviews at ProductAlert. Discover the latest trends, best brands, and right prices. Your guide to making the best purchase decisions!', // set false to total remove
             'separator' => ' - ',

public/build/manifest.json

@@ -98,7 +98,7 @@
     "src": "resources/sass/admin-app.scss"
   },
   "resources/sass/front-app.scss": {
-    "file": "assets/front-app-9bc7257c.css",
+    "file": "assets/front-app-87d3f80a.css",
     "isEntry": true,
     "src": "resources/sass/front-app.scss"
   }

resources/css/front-app.css

@@ -0,0 +1,43 @@
+.lqip-loader {
+  position: relative;
+  overflow: hidden;
+  width: auto;
+}
+
+.lqip-loader img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.lqip-loader img,
+.lqip-loader img {
+  display: block;
+}
+
+.lqip-loader img {
+  position: relative;
+  float: left;
+  display: block;
+}
+
+.lqip-frozen {
+  -webkit-filter: blur(8px);
+  -moz-filter: blur(8px);
+  -o-filter: blur(8px);
+  -ms-filter: blur(8px);
+  filter: blur(8px);
+  transform: scale(1.04);
+  animation: 0.2s ease-in 0.4s 1 forwards lqipFade;
+  width: 100%;
+}
+
+@keyframes lqipFade {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

resources/sass/front-app.scss

@@ -3,3 +3,5 @@
 @import "~bootstrap/scss/bootstrap";
 
 @import "~/bootstrap-icons/font/bootstrap-icons.css";
+
+@import "../css/front-app.css";

resources/views/front/country.blade.php

@@ -22,7 +22,14 @@
                             <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
                                 class="text-decoration-none">
                                 <div class="card-img-top ratio ratio-16x9">
-                                    <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->title }}">
+<div class="lqip-loader">
+  <!-- Use the LQIP image with the appropriate URL -->
+  <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
+  
+  <!-- Use the final JPEG image with the appropriate URL -->
+  <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
+</div>
+
                                 </div>
                             </a>
 
@@ -78,8 +85,13 @@ class="text-decoration-none">{{ $post->title }}</a>
                                             <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
                                                 class="text-decoration-none">
                                                 <div class="img-fluid rounded-start ratio ratio-16x9">
-                                                    <img src="{{ $post->featured_image }}"
-                                                        alt="Photo of {{ $post->title }}">
+<div class="lqip-loader">
+  <!-- Use the LQIP image with the appropriate URL -->
+  <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
+  
+  <!-- Use the final JPEG image with the appropriate URL -->
+  <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
+</div>
                                                 </div>
                                             </a>
                                         </div>

resources/views/front/country_all.blade.php

@@ -44,9 +44,15 @@
                                     </div>
                                     <a class="card-img-top"
                                         href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">
-                                        <img src="{{ $post->featured_image }}"
-                                            class="card-img-top rounded-bottom-2 rounded-top-0"
-                                            alt="Photo of {{ $post->title }}">
+                                                <div class="img-fluid rounded-start ratio ratio-16x9">
+<div class="lqip-loader">
+  <!-- Use the LQIP image with the appropriate URL -->
+  <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
+  
+  <!-- Use the final JPEG image with the appropriate URL -->
+  <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
+</div>
+                                                </div>
                                     </a>
 
                                 </div>

resources/views/front/country_category.blade.php

@@ -43,9 +43,15 @@
                                     </div>
                                     <a class="card-img-top"
                                         href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">
-                                        <img src="{{ $post->featured_image }}"
-                                            class="card-img-top rounded-bottom-2 rounded-top-0"
-                                            alt="Photo of {{ $post->title }}">
+                                                <div class="img-fluid rounded-start ratio ratio-16x9">
+<div class="lqip-loader">
+  <!-- Use the LQIP image with the appropriate URL -->
+  <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
+  
+  <!-- Use the final JPEG image with the appropriate URL -->
+  <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
+</div>
+                                                </div>
                                     </a>
 
                                 </div>

resources/views/front/post.blade.php

@@ -31,7 +31,15 @@
                             <h2 class="h5">{{ $post->excerpt }}</h2>
                         </div>
                         <div class="mb-3">
-                            <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}" class="img-fluid rounded-3">
+                                                <div class="img-fluid rounded-start ratio ratio-16x9">
+<div class="lqip-loader">
+  <!-- Use the LQIP image with the appropriate URL -->
+  <img class="img-fluid rounded-2" src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
+  
+  <!-- Use the final JPEG image with the appropriate URL -->
+  <img class="lqip-frozen img-fluid rounded-2" src="{{ $post->featured_image_lqip }}" alt="Placeholder image of {{ $post->name }}">
+</div>
+                                                </div>
                         </div>
                         <div class="mb-3">
                             {!! $post->html_body !!}

routes/api.php

@@ -1,9 +1,9 @@
 <?php
 
-use App\Models\Post;
 use App\Models\Author;
 use App\Models\Category;
 use App\Models\CountryLocale;
+use App\Models\Post;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -30,7 +30,6 @@
 
     })->name('api.admin.post.get');
 
-
     Route::get('/country-locales', function () {
         $country_locales = CountryLocale::where('enabled', true)->get();
         $default_locale_slug = 'my';

run_prod.sh

@@ -1,4 +1,6 @@
 #!/bin/bash
 
 eval 'APP_URL=https://productalert.co php artisan ziggy:generate'; 
+eval 'blade-formatter --write resources/\*_/_.blade.php';
+eval './vendor/bin/pint';
 eval 'npm run build';