Allow Image field type to have multiple sources

README.md

@@ -96,14 +96,16 @@ import '@fortawesome/fontawesome-free/css/fontawesome.css';
 import '@fortawesome/fontawesome-free/css/solid.css';
 ```
 
-If you are using Webpack, you can add the following lines to your admin     configuration:
+If you are using Webpack, you can add the following lines to your admin configuration:
 ```js
 // ./webpack.config.js
 //...
 Encore.addLoader({
     resolve: {
         alias: {
-            './acb-notification.js$': path.resolve(__dirname, 'vendor/sherlockode/sylius-advanced-content-plugin/src/Resources/js/AdvancedContentBundle/acb-notification.js')
+            './acb-notification.js$': path.resolve(__dirname, 'vendor/sherlockode/sylius-advanced-content-plugin/src/Resources/js/AdvancedContentBundle/acb-notification.js'),
+            './acb-slide.js$': path.resolve(__dirname, 'vendor/sherlockode/advanced-content-bundle/Resources/js/slide.js'),
+            './acb-slide-collection.js$': path.resolve(__dirname, 'vendor/sherlockode/sylius-advanced-content-plugin/src/Resources/js/AdvancedContentBundle/acb-slide-collection.js')
         }
     }
 });

composer.json

@@ -9,7 +9,7 @@
     "license": "MIT",
     "require": {
         "php": "^7.4 || ^8.1",
-        "sherlockode/advanced-content-bundle": "^0.9.2",
+        "sherlockode/advanced-content-bundle": "^0.9.7",
         "sylius/sylius": "^1.10"
     },
     "config": {

src/Resources/js/AdvancedContentBundle/acb-slide-collection.js

@@ -0,0 +1,6 @@
+import slide from './acb-slide.js';
+import 'sylius/bundle/UiBundle/Resources/private/js/sylius-form-collection';
+
+slide.element.on('slideContentUpdated', function() {
+  slide.content.find('[data-form-type="collection"]').CollectionForm();
+});

src/Resources/public/css/index.scss

@@ -10,3 +10,24 @@ $zindex: 999;
 .acb-lateral-slide-content .field details select {
     box-sizing: border-box;
 }
+.picture-sources {
+    > label::after {
+        content: '' !important;
+    }
+    [data-form-collection="list"] {
+        [data-form-collection="item"] {
+            + [data-form-collection="item"] {
+                border-top: 1px solid #e5e5e5;
+                margin-top: 10px;
+                padding-top: 15px;
+            }
+            &:last-child {
+                border-bottom: 1px solid #e5e5e5;
+                margin-bottom: 15px;
+            }
+            .picture-source {
+                margin-bottom: 10px;
+            }
+        }
+    }
+}