From 4a99c9dcf6ada7eb3e74d193809df076bb1ea0c3 Mon Sep 17 00:00:00 2001
From: AchillesKal <achilleas90gr@gmail.com>
Date: Sat, 13 Apr 2024 12:52:09 +0300
Subject: [PATCH] Fix image upload

---
 compose.override.yaml               |  2 +-
 frankenphp/conf.d/app.dev.ini       |  2 ++
 src/Factory/BlogPostFactory.php     |  4 ++--
 src/Service/UploaderHelper.php      |  5 +----
 templates/blog_post/_form.html.twig | 10 ++++++----
 templates/blog_post/show.html.twig  | 10 +++++++++-
 6 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/compose.override.yaml b/compose.override.yaml
index 15030bc..83cbb49 100644
--- a/compose.override.yaml
+++ b/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
diff --git a/frankenphp/conf.d/app.dev.ini b/frankenphp/conf.d/app.dev.ini
index e50f43d..89cfce4 100644
--- a/frankenphp/conf.d/app.dev.ini
+++ b/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
diff --git a/src/Factory/BlogPostFactory.php b/src/Factory/BlogPostFactory.php
index e0a5bea..f24493d 100644
--- a/src/Factory/BlogPostFactory.php
+++ b/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'),
diff --git a/src/Service/UploaderHelper.php b/src/Service/UploaderHelper.php
index b423a12..899f000 100644
--- a/src/Service/UploaderHelper.php
+++ b/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 [
diff --git a/templates/blog_post/_form.html.twig b/templates/blog_post/_form.html.twig
index 1f5a501..fccc280 100644
--- a/templates/blog_post/_form.html.twig
+++ b/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>
diff --git a/templates/blog_post/show.html.twig b/templates/blog_post/show.html.twig
index 458edeb..a6cf89a 100644
--- a/templates/blog_post/show.html.twig
+++ b/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 %}