Fix image upload

compose.override.yaml

@@ -14,7 +14,7 @@ services:
     environment:
       MERCURE_EXTRA_DIRECTIVES: demo
       # See https://xdebug.org/docs/all_settings#mode
-      XDEBUG_MODE: "${XDEBUG_MODE:-off}"
+      XDEBUG_MODE: "${XDEBUG_MODE:-debug}"
     extra_hosts:
       # Ensure that host.docker.internal is correctly defined on Linux
       - host.docker.internal:host-gateway

frankenphp/conf.d/app.dev.ini

@@ -3,3 +3,5 @@
 ; The `client_host` below may optionally be replaced with `discover_client_host=yes`
 ; Add `start_with_request=yes` to start debug session on each request
 xdebug.client_host = host.docker.internal
+discover_client_host = yes
+xdebug.client_port = 9003

src/Factory/BlogPostFactory.php

@@ -56,9 +56,9 @@ protected function getDefaults(): array
         $fileUpload = $this->uploaderHelper->uploadFile($file, $this->bannerDirectory, true);
 
         return [
-            'title' => ucfirst(self::faker()->words(5, true)),
+            'title' => ucfirst(self::faker()->words(10, true)),
             'summary' => self::faker()->text,
-            'content' => self::faker()->randomHtml(3, 6),
+            'content' => self::faker()->randomHtml(6, 10),
             'banner' => $fileUpload['filename'],
             'blurredThumbnail' => $fileUpload['blurredThumbnail'],
             'publishedAt' => self::faker()->dateTimeBetween('-3 month'),

src/Service/UploaderHelper.php

@@ -60,11 +60,8 @@ public function uploadFile(File $file, string $fileDirectory, $test = false): ar
             $this->filterService->getUrlOfFilteredImage($relativeFilePath, 'blog_list_low');
 
             $blurredThumbnail = $this->blurHash->createDataUriThumbnail($filePath, 100, 75);
-
-            // save the thumbnail to file
-            $this->filesystem->dumpFile($fileDirectory.'/'.pathinfo($newFilename, PATHINFO_FILENAME).'.webp', $blurredThumbnail);
         } catch (FileException $e) {
-
+            throw new FileException($e->getMessage());
         }
 
         return [

templates/blog_post/_form.html.twig

@@ -17,10 +17,12 @@
     </div>
 
     {% if blog_post.banner %}
-        <div class="flex flex-col">
-            <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="w-full h-full object-cover">
-            <span>Delete image: {{ form_widget(form.delete_banner) }}</span>
-        </div>
+        <img
+            src="{{ asset(uploaded_asset(blog_post.banner)) }}"
+            alt="{{ blog_post.title }}"
+        >
+
+        <span>Delete image: {{ form_widget(form.delete_banner) }}</span>
     {% endif %}
 
     <div>

templates/blog_post/show.html.twig

@@ -16,8 +16,16 @@
         <small>Updated at: {{ blog_post.updatedAt ? blog_post.updatedAt|date('D d M Y · H:i') : '' }}</small>
 
         {% if blog_post.banner %}
-            <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="h-full w-full object-cover">
+            <img
+                src="{{ blog_post.blurredThumbnail }}"
+                alt="{{ blog_post.title }}"
+                class="h-96 w-full rounded-3xl object-cover transition-all"
+                {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
+                    src: asset(uploaded_banner(blog_post.banner))
+                }) }}
+            >
         {% endif %}
+
         <p>{{ blog_post.content|purify }}</p>
     </article>
 {% endblock %}