Add default image sizes

contao-thememanager · Jun 22, 2023 · 653b563 · 653b563
1 parent b35b2f3
commit 653b563
Show file tree

Hide file tree

Showing 5 changed files with 305 additions and 2 deletions.
diff --git a/config/config.yaml b/config/config.yaml
@@ -0,0 +1,240 @@
+contao:
+  image:
+    sizes:
+      4_5_crop_small:
+        width: 600
+        height: 750
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      4_5_crop_medium:
+        width: 800
+        height: 1000
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      4_5_crop_large:
+        width: 1280
+        height: 1600
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+        items:
+          - media: '(max-width: 599px)'
+            width: 600
+            height: 750
+      1_1_crop_small:
+        width: 600
+        height: 600
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      1_1_crop_medium:
+        width: 800
+        height: 800
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      1_1_crop_large:
+        width: 1280
+        height: 1280
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+        items:
+          - media: '(max-width: 599px)'
+            width: 600
+            height: 600
+      4_3_crop_small:
+        width: 600
+        height: 450
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      4_3_crop_medium:
+        width: 800
+        height: 600
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      4_3_crop_large:
+        width: 1280
+        height: 960
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+        items:
+          - media: '(max-width: 599px)'
+            width: 600
+            height: 450
+      3_2_crop_small:
+        width: 600
+        height: 400
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      3_2_crop_medium:
+        width: 800
+        height: 533
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      3_2_crop_large:
+        width: 1280
+        height: 853
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+        items:
+          - media: '(max-width: 599px)'
+            width: 600
+            height: 400
+      16_10_crop_small:
+        width: 600
+        height: 375
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      16_10_crop_medium:
+        width: 800
+        height: 500
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      16_10_crop_large:
+        width: 1280
+        height: 800
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+        items:
+          - media: '(max-width: 599px)'
+            width: 600
+            height: 375
+      16_9_crop_small:
+        width: 600
+        height: 338
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      16_9_crop_medium:
+        width: 800
+        height: 450
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      16_9_crop_large:
+        width: 1280
+        height: 720
+        resize_mode: crop
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+        items:
+          - media: '(max-width: 599px)'
+            width: 600
+            height: 338
+      proportional_extra_small:
+        width: 480
+        resize_mode: proportional
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      proportional_small:
+        width: 600
+        resize_mode: proportional
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      proportional_medium:
+        width: 800
+        resize_mode: proportional
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+      proportional_large:
+        width: 1280
+        resize_mode: proportional
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+        items:
+          - media: '(max-width: 599px)'
+            width: 600
+      proportional_extra_large:
+        width: 1920
+        resize_mode: proportional
+        lazy_loading: true
+        formats:
+          jpg: [ webp, jpg ]
+          webp: [ webp, jpg ]
+          png: [ webp, png ]
+        items:
+          - media: '(max-width: 599px)'
+            width: 600
+          - media: '(max-width: 1263px)'
+            width: 1280
+      lazyloading_active:
+        lazy_loading: true
+        resize_mode: proportional
diff --git a/src/ContaoManager/Plugin.php b/src/ContaoManager/Plugin.php
@@ -14,11 +14,14 @@
 use Contao\ManagerPlugin\Bundle\BundlePluginInterface;
 use Contao\ManagerPlugin\Bundle\Config\BundleConfig;
 use Contao\ManagerPlugin\Bundle\Parser\ParserInterface;
+use Contao\ManagerPlugin\Config\ConfigPluginInterface;
 use ContaoThemeManager\Core\ContaoThemeManagerCore;
+use Exception;
 use Oveleon\ContaoComponentStyleManager\ContaoComponentStyleManager;
 use Oveleon\ContaoThemeCompilerBundle\ContaoThemeCompilerBundle;
+use Symfony\Component\Config\Loader\LoaderInterface;
 
-class Plugin implements BundlePluginInterface
+class Plugin implements BundlePluginInterface, ConfigPluginInterface
 {
     /**
      * {@inheritdoc}
@@ -31,4 +34,12 @@ public function getBundles(ParserInterface $parser): array
                 ->setReplace(['contao-thememanager']),
         ];
     }
+
+    /**
+     * @throws Exception
+     */
+    public function registerContainerConfiguration(LoaderInterface $loader, array $managerConfig): void
+    {
+        $loader->load('@ContaoThemeManagerCore/config/config.yaml');
+    }
 }
diff --git a/src/DependencyInjection/ContaoThemeManagerCoreExtension.php b/src/DependencyInjection/ContaoThemeManagerCoreExtension.php
@@ -2,6 +2,7 @@
 
 namespace ContaoThemeManager\Core\DependencyInjection;
 
+use Exception;
 use Symfony\Component\Config\FileLocator;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Extension\Extension;
@@ -11,8 +12,9 @@ class ContaoThemeManagerCoreExtension extends Extension
 {
     /**
      * {@inheritDoc}
+     * @throws Exception
      */
-    public function load(array $configs, ContainerBuilder $container)
+    public function load(array $configs, ContainerBuilder $container): void
     {
         $loader = new YamlFileLoader(
             $container,

diff --git a/translations/image_sizes.de.yml b/translations/image_sizes.de.yml
@@ -0,0 +1,25 @@
+# translations/image_sizes.de.yaml
+4_5_crop_small: 4:5 Exaktes Format (klein)
+4_5_crop_medium: 4:5 Exaktes Format (mittel)
+4_5_crop_large: 4:5 Exaktes Format (groß)
+1_1_crop_small: 1:1 Exaktes Format (klein)
+1_1_crop_medium: 1:1 Exaktes Format (mittel)
+1_1_crop_large: 1:1 Exaktes Format (groß)
+4_3_crop_small: 4:3 Exaktes Format (klein)
+4_3_crop_medium: 4:3 Exaktes Format (mittel)
+4_3_crop_large: 4:3 Exaktes Format (groß)
+3_2_crop_small: 3:2 Exaktes Format (klein)
+3_2_crop_medium: 3:2 Exaktes Format (mittel)
+3_2_crop_large: 3:2 Exaktes Format (groß)
+16_10_crop_small: 16:10 Exaktes Format (klein)
+16_10_crop_medium: 16:10 Exaktes Format (mittel)
+16_10_crop_large: 16:10 Exaktes Format (groß)
+16_9_crop_small: 16:9 Exaktes Format (klein)
+16_9_crop_medium: 16:9 Exaktes Format (mittel)
+16_9_crop_large: 16:9 Exaktes Format (groß)
+proportional_extra_small: Proportional (sehr klein)
+proportional_small: Proportional (klein)
+proportional_medium: Proportional (mittel)
+proportional_large: Proportional (groß)
+proportional_extra_large: Proportional (sehr groß)
+lazyloading_active: Lazyloading aktivieren
diff --git a/translations/image_sizes.en.yml b/translations/image_sizes.en.yml
@@ -0,0 +1,25 @@
+# translations/image_sizes.en.yaml
+4_5_crop_small: 4:5 Cropped (small)
+4_5_crop_medium: 4:5 Cropped (medium)
+4_5_crop_large: 4:5 Cropped (large)
+1_1_crop_small: 1:1 Cropped (small)
+1_1_crop_medium: 1:1 Cropped (medium)
+1_1_crop_large: 1:1 Cropped (large)
+4_3_crop_small: 4:3 Cropped (small)
+4_3_crop_medium: 4:3 Cropped (medium)
+4_3_crop_large: 4:3 Cropped (large)
+3_2_crop_small: 3:2 Cropped (small)
+3_2_crop_medium: 3:2 Cropped (medium)
+3_2_crop_large: 3:2 Cropped (large)
+16_10_crop_small: 16:10 Cropped (small)
+16_10_crop_medium: 16:10 Cropped (medium)
+16_10_crop_large: 16:10 Cropped (large)
+16_9_crop_small: 16:9 Cropped (small)
+16_9_crop_medium: 16:9 Cropped (medium)
+16_9_crop_large: 16:9 Cropped (large)
+proportional_extra_small: Proportional (extra small)
+proportional_small: Proportional (small)
+proportional_medium: Proportional (medium)
+proportional_large: Proportional (large)
+proportional_extra_large: Proportional (extra large)
+lazyloading_active: Activate lazyloading