Make images in image and video element use liip imagine filter

recipes/2.0/manifest.json

@@ -6,5 +6,9 @@
     },
     "copy-from-recipe": {
         "config/": "%CONFIG_DIR%/"
+    },
+    "env": {
+        "MONSIEURBIZ_SYLIUS_RICH_EDITOR_UPLOAD_DIR": "/media/rich-editor",
+        "MONSIEURBIZ_SYLIUS_RICH_EDITOR_IMAGE_UPLOAD_DIR": "/media/image"
     }
 }

src/Resources/config/config.yaml

@@ -13,3 +13,14 @@ knp_gaufrette:
     filesystems:
         monsieurbiz_rich_editor_fixture_file:
             adapter: 'monsieurbiz_rich_editor_fixture_file'
+
+parameters:
+    env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_UPLOAD_DIR): /media/rich-editor
+    env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_IMAGE_UPLOAD_DIR): /media/image
+
+liip_imagine:
+    loaders:
+        default:
+            filesystem:
+                data_root:
+                    - "%sylius_core.public_dir%/%env(MONSIEURBIZ_SYLIUS_RICH_EDITOR_UPLOAD_DIR)%"

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: ~

src/Resources/config/richeditor.yaml

@@ -1,6 +1,6 @@
 monsieurbiz_sylius_richeditor:
-    upload_directory: '/media/rich-editor'
-    image_upload_directory: '/media/image'
+    upload_directory: "%env(resolve:MONSIEURBIZ_SYLIUS_RICH_EDITOR_UPLOAD_DIR)%"
+    image_upload_directory: "%env(resolve:MONSIEURBIZ_SYLIUS_RICH_EDITOR_IMAGE_UPLOAD_DIR)%"
     ui_elements:
         monsieurbiz.html:
             alias: html

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\:

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 %}

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 %}

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>

src/Resources/views/Form/theme.html.twig

@@ -48,7 +48,7 @@
             {% if form.vars.attr['data-image'] is defined %}
                 <p>
                     <small>{{ 'monsieurbiz_richeditor_plugin.form.current_image' | trans }}</small><br />
-                    <img src="{{ current_file_path }}" alt="" style="max-width: 300px;max-height: 300px;" />
+                    <img src="{{  monsieurbiz_richeditor_get_media_without_upload_dir(current_file_path)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="" style="max-width: 300px;max-height: 300px;" />
                 </p>
             {% elseif form.vars.attr['data-video'] is defined %}
                 <p>

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 %}

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 %}

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>

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 */