Add lazy images

AchillesKal · Apr 7, 2024 · 10608d0 · 10608d0
1 parent b7607e6
commit 10608d0
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 2 deletions.
diff --git a/assets/controllers.json b/assets/controllers.json
@@ -19,6 +19,12 @@
                     "@symfony/ux-dropzone/dist/style.min.css": true
                 }
             }
+        },
+        "@symfony/ux-lazy-image": {
+            "lazy-image": {
+                "enabled": true,
+                "fetch": "eager"
+            }
         }
     },
     "entrypoints": []

diff --git a/composer.json b/composer.json
@@ -39,6 +39,7 @@
         "symfony/twig-bundle": "7.0.*",
         "symfony/ux-autocomplete": "^2.16",
         "symfony/ux-dropzone": "^2.16",
+        "symfony/ux-lazy-image": "^2.16",
         "symfony/validator": "7.0.*",
         "symfony/yaml": "7.0.*",
         "symfonycasts/tailwind-bundle": "^0.5.1",

diff --git a/composer.lock b/composer.lock
diff --git a/config/bundles.php b/config/bundles.php
@@ -21,4 +21,5 @@
     Symfony\UX\Autocomplete\AutocompleteBundle::class => ['all' => true],
     Exercise\HTMLPurifierBundle\ExerciseHTMLPurifierBundle::class => ['all' => true],
     Liip\ImagineBundle\LiipImagineBundle::class => ['all' => true],
+    Symfony\UX\LazyImage\LazyImageBundle::class => ['all' => true],
 ];
diff --git a/config/packages/liip_imagine.yaml b/config/packages/liip_imagine.yaml
@@ -6,3 +6,5 @@ liip_imagine:
     filter_sets:
         blog_list:
             quality: 75
+        blog_list_low:
+            quality: 30
diff --git a/symfony.lock b/symfony.lock
@@ -284,6 +284,9 @@
     "symfony/ux-dropzone": {
         "version": "v2.16.0"
     },
+    "symfony/ux-lazy-image": {
+        "version": "v2.16.0"
+    },
     "symfony/validator": {
         "version": "7.0",
         "recipe": {

diff --git a/templates/blog_post/index.html.twig b/templates/blog_post/index.html.twig
@@ -22,7 +22,13 @@
                         <figure class="relative">
                             {# Check if the blog post has a banner image #}
                             {% if blog_post.banner %}
-                                <img src="{{ asset(uploaded_asset(blog_post.banner)) | imagine_filter('blog_list') }}" alt="{{ blog_post.title }}" class="h-full w-full rounded-3xl object-cover">
+                                <img
+                                    src="{{ asset(uploaded_asset(blog_post.banner)) | imagine_filter('blog_list') }}"
+                                    alt="{{ blog_post.title }}" class="h-full w-full rounded-3xl object-cover"
+                                    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
+                                        src: asset(uploaded_asset(blog_post.banner)) | imagine_filter('blog_list_low')
+                                    }) }}
+                                >
                             {% else %}
                                 <div class="min-h-full h-72 flex justify-center items-center bg-gray-200 rounded-3xl fill-gray-500">
                                     <svg xmlns="http://www.w3.org/2000/svg" height="54" viewBox="0 -960 960 960" width="54">