image resizing and optimizing 720p and 240p

config/packages/liip_imagine.yaml

@@ -4,14 +4,21 @@ liip_imagine:
     driver: "gd"
 
     filter_sets:
-
-        # name our filter set "my_fixed_filter"
-        my_fixed_filter:
+        # name our first filter set "my_max_down_scale_filter"
+        my_max_down_scale_filter_720p:
             filters:
+                # use and setup the "downscale" filter
+                downscale:
+                    # input 3960x2560px -> output 1280x720px
+                    max: [1280, 720]
+            post_processors:
+                jpegoptim: { strip_all: true, max: 70, progressive: true }
+                optipng: { strip_all: true, level: 5 }
 
-                # use and setup the "fixed" filter
-                fixed:
-
-                    # set the fixed size to "120x90" pixels
-                    width: 120
-                    height: 90
+        my_max_down_scale_filter_240p:
+            filters:
+                downscale:
+                    max: [360, 240]
+            post_processors:
+                jpegoptim: { strip_all: true, max: 70, progressive: true }
+                optipng: { strip_all: true, level: 5 }

src/Event/ResizeImageOnUploadSubscriber.php

@@ -60,7 +60,7 @@ class ResizeImageOnUploadSubscriber implements EventSubscriberInterface
             $projectRoot = $this->appKernel->getProjectDir();
 
             // Création d'une image modifiée en cache
-            $thumbnailPath = $this->filterService->getUrlOfFilteredImage("images/pokemons/" . $object->getImageName(), 'my_fixed_filter');
+            $thumbnailPath = $this->filterService->getUrlOfFilteredImage("images/pokemons/" . $object->getImageName(), 'my_max_down_scale_filter_720p');
             $thumbnailInternalPath = parse_url($thumbnailPath)['path'];
 
             // Tampon pour les infos de l'ancienne image

templates/pokemon/index.html.twig

@@ -53,7 +53,7 @@
         {% for pokemon in pokemon %}
             <tr>
                 <td scope="row">{{ pokemon.numero }}.</td>
-                <td scope="row">{{ pokemon.nom }} {% if pokemon.imageName %} <img style="margin-left: 5px;" src={{ asset('/images/pokemons/' ~ pokemon.imageName)}} alt="pokemon-img" height="30px"> {% endif %}</td>
+                <td scope="row">{{ pokemon.nom }} {% if pokemon.imageName %} <img style="margin-left: 5px;" src={{ asset('/images/pokemons/' ~ pokemon.imageName) | imagine_filter('my_max_down_scale_filter_240p')}} alt="pokemon-img" height="30px"> {% endif %}</td>
                 <td scope="row">{{ pokemon.type1.name }}</td>
                 <td scope="row">{% if pokemon.type2 %} {{ pokemon.type2.name }} {% endif %}</td>
                 <td scope="row">{{ pokemon.generation.name }}</td>