feat(image): replace static image styles with dynamic on-the-fly generation

app/modules/blog/app_blog.info.yml

@@ -4,6 +4,7 @@ core_version_requirement: ^11
 package: App/Feature
 dependencies:
   - app_contract:app_contract
+  - app_image:app_image
   - app_media:app_media
   - app_platform:app_platform
   - drupal:image

app/modules/blog/composer.json

@@ -7,6 +7,7 @@
     ],
     "require": {
         "app/contract": "^1.0",
+        "app/image": "*",
         "app/platform": "^1.0",
         "app-asset/hljs": "^11.9",
         "drupal/photoswipe": "^5.0",

app/modules/blog/src/Controller/RssFeed.php

@@ -6,13 +6,13 @@
 
 use Drupal\app_blog\Node\ArticleBundle;
 use Drupal\app_contract\Utils\MediaHelper;
+use Drupal\app_image\DynamicImageStyle\DynamicImageStyle;
 use Drupal\Core\Cache\CacheableMetadata;
 use Drupal\Core\Cache\CacheableResponse;
 use Drupal\Core\Config\ConfigFactoryInterface;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Language\LanguageManagerInterface;
 use Drupal\Core\Url;
-use Drupal\image\ImageStyleInterface;
 use Drupal\node\NodeInterface;
 use Symfony\Component\HttpFoundation\Response;
 
@@ -24,6 +24,7 @@ public function __construct(
     private EntityTypeManagerInterface $entityTypeManager,
     private LanguageManagerInterface $languageManager,
     private ConfigFactoryInterface $configFactory,
+    private DynamicImageStyle $dynamicImageStyle,
   ) {}
 
   public function __invoke(): CacheableResponse {
@@ -156,9 +157,10 @@ private function addMediaContent(\DOMDocument $dom, \DOMElement $item, ArticleBu
     $file_uri = $file->getFileUri();
     \assert(\is_string($file_uri));
 
-    $image_style = $this->entityTypeManager->getStorage('image_style')->load('150x200');
-    \assert($image_style instanceof ImageStyleInterface);
-    $url = $image_style->buildUrl($file_uri);
+    $url = $this
+      ->dynamicImageStyle
+      ->effect('image_scale_and_crop', ['width' => 150, 'height' => 200])
+      ->buildUrl($file_uri);
 
     $media_content = $dom->createElement('media:content');
     $media_content->setAttribute('url', $url);

app/modules/blog/src/Generator/BannerGenerator.php

@@ -4,13 +4,12 @@
 
 namespace Drupal\app_blog\Generator;
 
+use Drupal\app_image\DynamicImageStyle\DynamicImageStyle;
 use Drupal\Component\Utility\Crypt;
-use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\File\FileExists;
 use Drupal\Core\File\FileSystemInterface;
 use Drupal\Core\Render\RendererInterface;
 use Drupal\Core\Template\TwigEnvironment;
-use Drupal\image\ImageStyleInterface;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\Mime\MimeTypeGuesserInterface;
 use Symfony\Component\String\UnicodeString;
@@ -26,7 +25,7 @@ public function __construct(
     #[Autowire(service: 'file.mime_type.guesser')]
     private MimeTypeGuesserInterface $mimeTypeGuesser,
     private TwigEnvironment $twig,
-    private EntityTypeManagerInterface $entityTypeManager,
+    private DynamicImageStyle $dynamicImageStyle,
   ) {}
 
   public function generate(string $poster_path, string $title, int $created, int $comment_count): ?string {
@@ -65,13 +64,9 @@ private function prepareBannerUri(string $poster_path, string $title, int $creat
   }
 
   private function renderSvg(string $poster_path, string $title, int $created, int $comment_count): string {
-    $image_style = $this->entityTypeManager->getStorage('image_style')->load('400x528');
-
-    if ($image_style instanceof ImageStyleInterface) {
-      $style_uri = $image_style->buildUri($poster_path);
-      $image_style->createDerivative($poster_path, $style_uri);
-      $poster_path = $style_uri;
-    }
+    $builder = $this->dynamicImageStyle->effect('image_scale_and_crop', ['width' => 400, 'height' => 528]);
+    $builder->createDerivative($poster_path);
+    $poster_path = $builder->buildUri($poster_path);
 
     $mime = $this->mimeTypeGuesser->guessMimeType($poster_path);
     $base64 = "data:$mime;base64," . \base64_encode((string) \file_get_contents($poster_path));

app/modules/blog/src/Hook/Theme/PreprocessAppBlogLightboxResponsiveImage.php

@@ -4,69 +4,20 @@
 
 namespace Drupal\app_blog\Hook\Theme;
 
-use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Hook\Attribute\Hook;
-use Drupal\Core\Image\ImageFactory;
-use Drupal\image\ImageStyleInterface;
 use Drupal\photoswipe\PhotoswipeAssetsManagerInterface;
-use Drupal\responsive_image\ResponsiveImageStyleInterface;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 
 #[Hook('preprocess_app_blog_lightbox_responsive_image')]
 final readonly class PreprocessAppBlogLightboxResponsiveImage {
 
   public function __construct(
-    private EntityTypeManagerInterface $entityTypeManager,
-    private ImageFactory $imageFactory,
     #[Autowire(service: 'photoswipe.assets_manager')]
     private PhotoswipeAssetsManagerInterface $photoswipeAssetsManager,
   ) {}
 
   public function __invoke(array &$variables): void {
     $this->photoswipeAssetsManager->attach($variables);
-    $this->prepareResponsiveImage($variables);
-    $this->prepareFullImageUrl($variables);
-  }
-
-  private function prepareResponsiveImage(array &$variables): void {
-    \assert($variables['thumbnail_responsive_image_style_id']);
-    $storage = $this->entityTypeManager->getStorage('responsive_image_style');
-    $style = $storage->load($variables['thumbnail_responsive_image_style_id']);
-
-    if ($style instanceof ResponsiveImageStyleInterface) {
-      $variables['responsive_image'] = [
-        '#type' => 'responsive_image',
-        '#responsive_image_style_id' => $variables['thumbnail_responsive_image_style_id'],
-      ];
-    }
-    else {
-      $variables['responsive_image'] = [
-        '#theme' => 'image',
-      ];
-    }
-
-    $variables['responsive_image']['#uri'] = $variables['uri'];
-
-    if (\array_key_exists('alt', $variables)) {
-      $variables['responsive_image']['#attributes']['alt'] = $variables['alt'];
-    }
-
-    if (!\array_key_exists('title', $variables)) {
-      return;
-    }
-
-    $variables['responsive_image']['#attributes']['title'] = $variables['title'];
-  }
-
-  private function prepareFullImageUrl(array &$variables): void {
-    \assert($variables['lightbox_image_style_id']);
-    $storage = $this->entityTypeManager->getStorage('image_style');
-    $style = $storage->load($variables['lightbox_image_style_id']);
-    \assert($style instanceof ImageStyleInterface);
-    $variables['full_image_url'] = $style->buildUrl($variables['uri']);
-    // Prepare size for zoom aspect ratio.
-    $image = $this->imageFactory->get($style->buildUri($variables['uri']));
-    $variables['size'] = "{$image->getWidth()}x{$image->getHeight()}";
   }
 
 }

app/modules/blog/tests/src/Kernel/Plugin/Filter/InternalLinkFilterTest.php

@@ -21,6 +21,7 @@ final class InternalLinkFilterTest extends KernelTestBase {
     'app_blog',
     'app_contract',
     'app_file',
+    'app_image',
     'app_media',
     'app_platform',
     'app_tag',

app/modules/blog/tests/src/Kernel/Sync/ArticleSynchronizerTest.php

@@ -39,6 +39,7 @@ final class ArticleSynchronizerTest extends KernelTestBase {
     'app_blog',
     'app_contract',
     'app_file',
+    'app_image',
     'app_media',
     'app_platform',
     'app_tag',

app/modules/contract/src/Stub/Stub.php

@@ -0,0 +1,13 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\app_contract\Stub;
+
+final readonly class Stub {
+
+  public function __construct() {
+    throw new \LogicException('The contract is not implemented.');
+  }
+
+}

app/modules/image/app_image.info.yml

@@ -0,0 +1,8 @@
+name: 'App: Image'
+description: 'Image infrastructure: dynamic image styles.'
+type: module
+core_version_requirement: ^11
+container_rebuild_required: false
+package: App/Infrastructure
+dependencies:
+  - image:image

app/modules/image/app_image.install

@@ -0,0 +1,24 @@
+<?php
+
+/**
+ * @file
+ * Install and uninstall hooks for the App: Image module.
+ */
+
+declare(strict_types=1);
+
+use Drupal\Component\Utility\Crypt;
+
+/**
+ * Implements hook_install().
+ */
+function app_image_install(): void {
+  \Drupal::state()->set('app_image.dynamic_image_style_key', Crypt::randomBytesBase64());
+}
+
+/**
+ * Implements hook_uninstall().
+ */
+function app_image_uninstall(): void {
+  \Drupal::state()->delete('app_image.dynamic_image_style_key');
+}

app/modules/image/app_image.routing.yml

@@ -0,0 +1,2 @@
+route_callbacks:
+  - Drupal\app_image\Routing\RouteProvider

app/modules/image/composer.json

@@ -0,0 +1,9 @@
+{
+    "name": "app/image",
+    "type": "drupal-custom-module",
+    "version": "1.0.0",
+    "require": {
+        "php": "^8.4",
+        "webmozart/assert": "^2.1"
+    }
+}

app/modules/image/src/AppImageServiceProvider.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\app_image;
+
+use Drupal\app_image\Controller\DynamicImageStyleController;
+use Drupal\app_image\DynamicImageStyle\DynamicImageStyle;
+use Drupal\app_image\PathProcessor\DynamicImageStylePathProcessor;
+use Drupal\app_image\Routing\RouteProvider;
+use Drupal\app_image\Twig\DynamicImageStyleExtension;
+use Drupal\Core\DependencyInjection\ContainerBuilder;
+use Drupal\Core\DependencyInjection\ServiceProviderInterface;
+use Symfony\Component\DependencyInjection\Definition;
+
+final readonly class AppImageServiceProvider implements ServiceProviderInterface {
+
+  #[\Override]
+  public function register(ContainerBuilder $container): void {
+    $autowire = static fn (string $class): Definition => $container
+      ->autowire($class)
+      ->setPublic(TRUE)
+      ->setAutoconfigured(TRUE);
+
+    $container->setParameter('app_image.skip_procedural_hook_scan', TRUE);
+
+    $autowire(DynamicImageStyle::class);
+    $autowire(DynamicImageStyleController::class);
+    $autowire(DynamicImageStylePathProcessor::class);
+    $autowire(DynamicImageStyleExtension::class);
+    $autowire(RouteProvider::class);
+  }
+
+}