Embeds social media icons in emails

Replaces the use of asset URLs for social media icons in emails with base64 encoded images.

This change improves email deliverability and ensures that the social media icons are always displayed correctly, even if the email client blocks external image requests.

A new Twig filter `img_to_base64` is introduced to convert images to base64 data URIs.

src/Service/Twig/ToBase64Extension.php

@@ -0,0 +1,40 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Service\Twig;
+
+use App\Service\Utils\PathUtils;
+use Path\Path;
+use Symfony\Component\Asset\Packages;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+class ToBase64Extension extends AbstractExtension
+{
+    public function __construct(
+        private Packages $packages,
+        private string $projectDir
+    ) {}
+
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('img_to_base64', [$this, 'imgToBase64']),
+        ];
+    }
+
+    public function imgToBase64(string $assetPath): string
+    {
+        $publicDir = (new Path($this->projectDir))->append('public');
+        $imgPath = $publicDir->append($assetPath);
+
+        if (!$imgPath->exists()) {
+            return '';
+        }
+
+        $imageData = base64_encode($imgPath->getContent());
+        $mimeType = mime_content_type($imgPath->path()) ?: 'image/jpeg';
+
+        return "data:$mimeType;base64,$imageData";
+    }
+}

templates/emails/base.html.twig

@@ -35,8 +35,13 @@
         .center{
             text-align: center;
         }
-        .social_link{
+        .social_link {
             margin: 0 5px;
+            padding-right: 15px;
+        }
+        .social_link img{
+            max-width: 30px;
+            max-height: 30px;
         }
         {% endblock %}
     </style>
@@ -82,9 +87,16 @@
                 <br />
                 <br />
                 <h3>Suivez-nous :</h3>
-                <a href="https://www.facebook.com/opentalent" target="_blank" class="social_link"><img src="{{ asset('bundles/app/images/facebook.jpg') }}" width="30px"/></a>
-                <a href="https://www.linkedin.com/company/opentalent-agenda-et-logiciels-culturels" target="_blank" class="social_link"><img src="{{ asset('bundles/app/images/linkedin.jpg') }}" width="30px"/></a>
-                <a href="https://www.youtube.com/@Opentalent74300" target="_blank" class="social_link"><img src="{{ asset('bundles/app/images/youtube.jpg') }}" width="30px"/></a>
+
+                <a href="https://www.facebook.com/opentalent" target="_blank" class="social_link">
+                    <img src="{{ 'images/facebook.jpg' | img_to_base64 }}" width="30px"/>
+                </a>
+                <a href="https://www.linkedin.com/company/opentalent-agenda-et-logiciels-culturels" target="_blank" class="social_link">
+                    <img src="{{ 'images/linkedin.jpg' | img_to_base64 }}" width="30px"/>
+                </a>
+                <a href="https://www.youtube.com/@Opentalent74300" target="_blank" class="social_link">
+                    <img src="{{ 'images/youtube.jpg' | img_to_base64 }}" width="30px"/>
+                </a>
             {% endblock %}
         </div>