Add blurred blog post image

AchillesKal · Apr 12, 2024 · 38447bf · 38447bf
1 parent ec28130
commit 38447bf
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 13 deletions.
diff --git a/config/services.yaml b/config/services.yaml
@@ -31,3 +31,6 @@ services:
             - { driver: 'gd' } 
 
     Liip\ImagineBundle\Service\FilterService: '@liip_imagine.service.filter'
+
+    Symfony\UX\LazyImage\BlurHash\BlurHash:
+        public: true
diff --git a/migrations/Version20240412232848.php b/migrations/Version20240412232848.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20240412232848 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE blog_post ADD blurred_thumbnail TEXT DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE blog_post DROP blurred_thumbnail');
+    }
+}
diff --git a/src/Controller/BlogPostController.php b/src/Controller/BlogPostController.php
@@ -46,7 +46,9 @@ public function new(
         $form->handleRequest($request);
         if ($form->isSubmitted() && $form->isValid()) {
             if ($bannerFile = $form->get('banner')->getData()) {
-                $blogPost->setBanner($uploaderHelper->uploadFile($bannerFile, $this->getParameter('banner_directory')));
+                $fileUpload = $uploaderHelper->uploadFile($bannerFile, $this->getParameter('banner_directory'));
+                $blogPost->setBanner($fileUpload['filename']);
+                $blogPost->setBlurredThumbnail($fileUpload['blurredThumbnail']);
             }
 
             $entityManager->persist($blogPost);
@@ -88,7 +90,9 @@ public function edit(Request $request, BlogPost $blogPost, EntityManagerInterfac
                     unlink($this->getParameter('banner_directory').'/'.$blogPost->getBanner());
                 }
 
-                $blogPost->setBanner($uploaderHelper->uploadFile($bannerFile, $this->getParameter('banner_directory')));
+                $fileUpload = $uploaderHelper->uploadFile($bannerFile, $this->getParameter('banner_directory'));
+                $blogPost->setBanner($fileUpload['filename']);
+                $blogPost->setBlurredThumbnail($fileUpload['blurredThumbnail']);
             }
 
             $entityManager->flush();

diff --git a/src/Entity/BlogPost.php b/src/Entity/BlogPost.php
@@ -42,6 +42,9 @@ class BlogPost
     #[ORM\Column(length: 1000, nullable: true)]
     private ?string $summary = null;
 
+    #[ORM\Column(type: Types::TEXT, nullable: true)]
+    private ?string $blurredThumbnail = null;
+
     public function __construct()
     {
         $this->tags = new ArrayCollection();
@@ -150,4 +153,16 @@ public function setSummary(?string $summary): static
 
         return $this;
     }
+
+    public function getBlurredThumbnail(): ?string
+    {
+        return $this->blurredThumbnail;
+    }
+
+    public function setBlurredThumbnail(?string $blurredThumbnail): static
+    {
+        $this->blurredThumbnail = $blurredThumbnail;
+
+        return $this;
+    }
 }
diff --git a/src/Factory/BlogPostFactory.php b/src/Factory/BlogPostFactory.php
@@ -53,13 +53,14 @@ protected function getDefaults(): array
     {
         $file = new UploadedFile( __DIR__ . '/../../assets/images/test.webp', 'test.webp', test: true);
 
-        $filename = $this->uploaderHelper->uploadFile($file, $this->bannerDirectory, true);
+        $fileUpload = $this->uploaderHelper->uploadFile($file, $this->bannerDirectory, true);
 
         return [
             'title' => ucfirst(self::faker()->words(5, true)),
             'summary' => self::faker()->text,
             'content' => self::faker()->randomHtml(3, 6),
-            'banner' => $filename,
+            'banner' => $fileUpload['filename'],
+            'blurredThumbnail' => $fileUpload['blurredThumbnail'],
             'publishedAt' => self::faker()->dateTimeBetween('-3 month'),
         ];
     }

diff --git a/src/Service/UploaderHelper.php b/src/Service/UploaderHelper.php
@@ -10,6 +10,7 @@
 use Symfony\Component\HttpFoundation\File\File;
 use Symfony\Component\String\Slugger\SluggerInterface;
 use Symfony\Component\Filesystem\Filesystem;
+use Symfony\UX\LazyImage\BlurHash\BlurHash;
 
 class UploaderHelper
 {
@@ -20,21 +21,21 @@ public function __construct(
         private CacheManager $cacheManager,
         private FilterManager $filterManager,
         private DataManager $dataManager,
-        private FilterService $filterService
+        private FilterService $filterService,
+        private BlurHash $blurHash,
     )
     {
         $this->filesystem = new Filesystem();
     }
 
-    public function uploadFile(File $file, string $fileDirectory, $test = false): string
+    public function uploadFile(File $file, string $fileDirectory, $test = false): array
     {
         $originalFilename = pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME);
 
         // this is needed to safely include the file name as part of the URL
         $safeFilename = $this->slugger->slug($originalFilename);
         $newFilename = $safeFilename.'-'.uniqid().'.'.$file->guessExtension();
 
-
         try {
             if (true === $test) {
                 $this->filesystem->copy(
@@ -53,14 +54,22 @@ public function uploadFile(File $file, string $fileDirectory, $test = false): st
             }
 
             $search = '/app/public';
-            $filePath = str_replace($search, '', $filePath);
+            $relativeFilePath = str_replace($search, '', $filePath);
+
+            $this->filterService->getUrlOfFilteredImage($relativeFilePath, 'blog_list');
+            $this->filterService->getUrlOfFilteredImage($relativeFilePath, 'blog_list_low');
 
-            $this->filterService->getUrlOfFilteredImage($filePath, 'blog_list');
-            $this->filterService->getUrlOfFilteredImage($filePath, '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) {
-            dd($e->getMessage());
+
         }
 
-        return $newFilename;
+        return [
+            'filename' => $newFilename,
+            'blurredThumbnail' => $blurredThumbnail,
+        ];
     }
 }
diff --git a/templates/blog_post/index.html.twig b/templates/blog_post/index.html.twig
@@ -22,7 +22,7 @@
                         <figure class="relative">
                             {% if blog_post.banner %}
                                 <img
-                                    src="{{ data_uri_thumbnail(asset(uploaded_banner_low(blog_post.banner)), 100, 75) }}"
+                                    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', {