Make images in image and video element use liip imagine filter

monsieurbiz · Apr 12, 2024 · cc4ad3e · cc4ad3e
1 parent bbade9a
commit cc4ad3e
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 11 deletions.
diff --git a/src/Resources/config/config.yaml b/src/Resources/config/config.yaml
@@ -13,3 +13,12 @@ knp_gaufrette:
     filesystems:
         monsieurbiz_rich_editor_fixture_file:
             adapter: 'monsieurbiz_rich_editor_fixture_file'
+
+liip_imagine:
+    loaders:
+        default:
+            filesystem:
+                data_root:
+                    # @TODO manage to use the configuration parameter
+                    # - "%sylius_core.public_dir%/%monsieurbiz.richeditor.config.upload_directory%"
+                    - "%sylius_core.public_dir%/media/rich-editor"
diff --git a/src/Resources/config/images.yaml b/src/Resources/config/images.yaml
@@ -4,3 +4,4 @@ liip_imagine:
             filters:
                 thumbnail: { size: [400, 400], mode: inset }
                 relative_resize: { widen: 32 }
+        monsieurbiz_rich_editor_image: ~
diff --git a/src/Resources/config/services.yaml b/src/Resources/config/services.yaml
@@ -7,6 +7,7 @@ services:
         bind:
             string $monsieurbizRicheditorDefaultElement: '%monsieurbiz.richeditor.config.default_element%'
             string $monsieurbizRicheditorDefaultElementDataField: '%monsieurbiz.richeditor.config.default_element_data_field%'
+            string $monsieurbizRicheditorUploadDirectory: '%monsieurbiz.richeditor.config.upload_directory%'
             Gaufrette\FilesystemInterface $filesystem: '@gaufrette.monsieurbiz_rich_editor_fixture_file_filesystem'
 
     MonsieurBiz\SyliusRichEditorPlugin\Controller\:

diff --git a/src/Resources/views/Admin/UiElement/image.html.twig b/src/Resources/views/Admin/UiElement/image.html.twig
@@ -13,10 +13,10 @@
 <p style="text-align: {{align}};">
     {% if element.link is not empty %}
         <a href="{{ element.link }}">
-            <img class="ui fluid image" src="{{ element.image }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+            <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
         </a>
     {% else %}
-        <img class="ui fluid image" src="{{ element.image }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+        <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
     {% endif %}
 </p>
 {% endif %}
diff --git a/src/Resources/views/Admin/UiElement/image_collection.html.twig b/src/Resources/views/Admin/UiElement/image_collection.html.twig
@@ -9,10 +9,10 @@
         <div class="column">
             {% if image.link is not empty %}
                 <a href="{{ image.link }}">
-                    <img class="ui fluid image" src="{{ image.image }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                    <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(image.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
                 </a>
             {% else %}
-                <img class="ui fluid image" src="{{ image.image }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(image.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
             {% endif %}
         </div>
     {% endfor %}

diff --git a/src/Resources/views/Admin/UiElement/video.html.twig b/src/Resources/views/Admin/UiElement/video.html.twig
@@ -8,7 +8,7 @@
 #}
 {% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
 <div style="text-align: {{align}};">
-    <video width="100%" poster="{{ element.image }}" controls>
+    <video width="100%" poster="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" controls>
         <source src="{{ element.video }}" type="video/{{ element.video|split('.')|last }}">
     </video>
 </div>
diff --git a/src/Resources/views/Shop/UiElement/image.html.twig b/src/Resources/views/Shop/UiElement/image.html.twig
@@ -13,10 +13,10 @@
 <p style="text-align: {{align}};">
     {% if element.link is not empty %}
         <a href="{{ element.link }}">
-            <img class="ui fluid image" src="{{ element.image }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+            <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
         </a>
     {% else %}
-        <img class="ui fluid image" src="{{ element.image }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
+        <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ element.alt|default('') }}" title="{{ element.title|default('') }}" />
     {% endif %}
 </p>
 {% endif %}
diff --git a/src/Resources/views/Shop/UiElement/image_collection.html.twig b/src/Resources/views/Shop/UiElement/image_collection.html.twig
@@ -9,10 +9,10 @@
         <div class="column">
             {% if image.link is not empty %}
                 <a href="{{ image.link }}">
-                    <img class="ui fluid image" src="{{ image.image }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                    <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(image.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
                 </a>
             {% else %}
-                <img class="ui fluid image" src="{{ image.image }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(image.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
             {% endif %}
         </div>
     {% endfor %}

diff --git a/src/Resources/views/Shop/UiElement/video.html.twig b/src/Resources/views/Shop/UiElement/video.html.twig
@@ -8,7 +8,7 @@
 #}
 {% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
 <div style="text-align: {{align}};">
-    <video width="100%" poster="{{ element.image }}" controls>
+    <video width="100%" poster="{{ monsieurbiz_richeditor_get_media_without_upload_dir(element.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" controls>
         <source src="{{ element.video }}" type="video/{{ element.video|split('.')|last }}">
     </video>
 </div>
diff --git a/src/Twig/RichEditorExtension.php b/src/Twig/RichEditorExtension.php
@@ -38,19 +38,23 @@ final class RichEditorExtension extends AbstractExtension
 
     private string $defaultElementDataField;
 
+    private string $uploadDirectory;
+
     /**
      * RichEditorExtension constructor.
      */
     public function __construct(
         RegistryInterface $uiElementRegistry,
         Environment $twig,
         string $monsieurbizRicheditorDefaultElement,
-        string $monsieurbizRicheditorDefaultElementDataField
+        string $monsieurbizRicheditorDefaultElementDataField,
+        string $monsieurbizRicheditorUploadDirectory
     ) {
         $this->uiElementRegistry = $uiElementRegistry;
         $this->twig = $twig;
         $this->defaultElement = $monsieurbizRicheditorDefaultElement;
         $this->defaultElementDataField = $monsieurbizRicheditorDefaultElementDataField;
+        $this->uploadDirectory = $monsieurbizRicheditorUploadDirectory;
     }
 
     /**
@@ -78,6 +82,7 @@ public function getFunctions(): array
             new TwigFunction('monsieurbiz_richeditor_get_default_element', [$this, 'getDefaultElement'], ['is_safe' => ['html']]),
             new TwigFunction('monsieurbiz_richeditor_get_default_element_data_field', [$this, 'getDefaultElementDataField'], ['is_safe' => ['html']]),
             new TwigFunction('monsieurbiz_richeditor_get_current_file_path', [$this, 'getCurrentFilePath'], ['needs_context' => true, 'is_safe' => ['html']]),
+            new TwigFunction('monsieurbiz_richeditor_get_media_without_upload_dir', [$this, 'getMediaWithoutUploadDir'], ['is_safe' => ['html', 'js']]),
         ];
     }
 
@@ -238,6 +243,15 @@ public function getCurrentFilePath(array $context, string $varName = 'full_name'
         return $path;
     }
 
+    public function getMediaWithoutUploadDir(string $path): string
+    {
+        if (0 === strpos($path, $this->uploadDirectory)) {
+            return substr($path, \strlen($this->uploadDirectory));
+        }
+
+        return $path;
+    }
+
     private function isAdmin(array $context): bool
     {
         /** @var ?AppVariable $app */