Add Symfony UX Image component (Slim v1)

src/Image/.gitattributes

@@ -0,0 +1,6 @@
+* export-ignore
+.gitattributes export-ignore
+.gitignore export-ignore
+.php-cs-fixer.dist.php export-ignore
+phpunit.dist.xml export-ignore
+tests/ export-ignore

src/Image/.gitignore

@@ -0,0 +1,6 @@
+/vendor/
+/composer.lock
+/phpunit.xml
+/.phpunit.result.cache
+.phpunit.cache
+/var/

src/Image/.php-cs-fixer.dist.php

@@ -0,0 +1,27 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+use PhpCsFixer\Finder;
+use PhpCsFixer\Runner\Parallel\ParallelConfigFactory;
+
+return (new PhpCsFixer\Config())
+    ->setParallelConfig(ParallelConfigFactory::detect())
+    ->setRules([
+        '@Symfony' => true,
+        '@Symfony:risky' => true,
+    ])
+    ->setRiskyAllowed(true)
+    ->setFinder(
+        (new Finder())
+            ->in(__DIR__.'/src')
+            ->in(__DIR__.'/tests')
+    )
+;

src/Image/.symfony.bundle.yaml

@@ -0,0 +1,3 @@
+branches: ['2.x', '3.x']
+maintained_branches: ['3.x']
+doc_dir: 'doc'

src/Image/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 2.32.0
+
+- Add Symfony UX Image component

src/Image/README.md

@@ -0,0 +1,81 @@
+# Symfony UX Image
+
+Optimized responsive image components with automatic format conversion and Core Web Vitals optimization.
+
+## Installation
+
+```bash
+composer require symfony/ux-image
+```
+
+## Quick Start
+
+### Basic Usage
+
+```twig
+{# Simple responsive image #}
+<twig:ux:img
+    src="/images/hero.jpg"
+    alt="Hero image"
+    width="100vw md:80vw"
+/>
+```
+
+### Art Direction
+
+```twig
+{# Different aspect ratios per breakpoint #}
+<twig:ux:picture
+    src="/images/banner.jpg"
+    alt="Banner"
+    width="100vw md:80vw"
+    ratio="sm:1:1 md:16:9"
+/>
+```
+
+### Without Twig Components
+
+```twig
+{{ ux_image('/images/hero.jpg', 'Hero image', { width: '100vw md:80vw' }) }}
+```
+
+## Features
+
+- **Automatic WebP conversion** — via configurable providers
+- **Responsive srcset/sizes** — viewport-based width syntax (`100vw md:80vw`)
+- **Density support** — Retina displays (`densities="x1 x2"`)
+- **Art direction** — different crops per breakpoint with `<twig:ux:picture>`
+- **Provider-based** — works with local files, CDN, or any image service
+- **No hard dependencies** — no image processing library required
+
+## Configuration
+
+```yaml
+# config/packages/ux_image.yaml
+ux_image:
+    default_provider: passthrough
+    breakpoints:
+        sm: 640
+        md: 768
+        lg: 1024
+        xl: 1280
+        2xl: 1536
+    defaults:
+        format: webp
+        quality: 80
+        loading: lazy
+        fit: cover
+```
+
+### Using a CDN
+
+```yaml
+ux_image:
+    providers:
+        cloudflare:
+            pattern: '/cdn-cgi/image/w={width},f={format},q={quality}/{src}'
+```
+
+## License
+
+MIT License — see [LICENSE](LICENSE) for details.

src/Image/composer.json

@@ -0,0 +1,72 @@
+{
+    "name": "symfony/ux-image",
+    "type": "symfony-bundle",
+    "description": "Optimized responsive image components with automatic format conversion and Core Web Vitals optimization.",
+    "keywords": [
+        "symfony-ux",
+        "symfony",
+        "image",
+        "responsive",
+        "webp",
+        "optimization",
+        "core web vitals"
+    ],
+    "homepage": "https://symfony.com",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Aleksey Razbakov",
+            "email": "aleksey@razbakov.com"
+        },
+        {
+            "name": "Symfony Community",
+            "homepage": "https://symfony.com/contributors"
+        }
+    ],
+    "autoload": {
+        "psr-4": {
+            "Symfony\\UX\\Image\\": "src/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Symfony\\UX\\Image\\Tests\\": "tests/"
+        }
+    },
+    "require": {
+        "php": ">=8.4",
+        "symfony/framework-bundle": "^7.4|^8.0",
+        "symfony/twig-bundle": "^7.4|^8.0",
+        "symfony/config": "^7.4|^8.0",
+        "symfony/dependency-injection": "^7.4|^8.0",
+        "symfony/http-kernel": "^7.4|^8.0",
+        "symfony/options-resolver": "^7.4|^8.0",
+        "twig/twig": "^3.0"
+    },
+    "require-dev": {
+        "friendsofphp/php-cs-fixer": "^3.65",
+        "phpunit/phpunit": "^11.1|^12.0",
+        "symfony/browser-kit": "^7.4|^8.0",
+        "symfony/css-selector": "^7.4|^8.0",
+        "symfony/debug-bundle": "^7.4|^8.0",
+        "symfony/phpunit-bridge": "^7.4|^8.0",
+        "symfony/yaml": "^7.4|^8.0",
+        "symfony/ux-twig-component": "^2.21|^3.0"
+    },
+    "suggest": {
+        "symfony/ux-twig-component": "For using the Twig component syntax (<twig:ux:img>)"
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "conflict": {
+        "symfony/flex": "<1.13"
+    },
+    "extra": {
+        "thanks": {
+            "name": "symfony/ux",
+            "url": "https://github.com/symfony/ux"
+        }
+    },
+    "minimum-stability": "dev"
+}

src/Image/config/services.yaml

@@ -0,0 +1,25 @@
+services:
+    _defaults:
+        autowire: true
+        autoconfigure: true
+
+    Symfony\UX\Image\Provider\ProviderRegistry:
+        public: true
+
+    Symfony\UX\Image\Service\Transformer:
+        arguments:
+            $breakpoints: '%ux_image.breakpoints%'
+
+    Symfony\UX\Image\Twig\Img:
+        tags:
+            - { name: 'twig.component' }
+
+    Symfony\UX\Image\Twig\Picture:
+        tags:
+            - { name: 'twig.component' }
+
+    # Auto-register providers
+    Symfony\UX\Image\Provider\ProviderInterface:
+        abstract: true
+        tags:
+            - { name: 'ux_image.provider' }

src/Image/phpunit.dist.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/11.0/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         colors="true"
+         failOnRisky="true"
+         failOnWarning="true"
+>
+    <testsuites>
+        <testsuite name="Symfony UX Image Test Suite">
+            <directory>./tests/</directory>
+        </testsuite>
+    </testsuites>
+    <source>
+        <include>
+            <directory suffix=".php">./src</directory>
+        </include>
+    </source>
+</phpunit>

src/Image/src/DependencyInjection/Compiler/ProviderPass.php

@@ -0,0 +1,42 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Image\DependencyInjection\Compiler;
+
+use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Reference;
+use Symfony\UX\Image\Provider\ProviderRegistry;
+
+/**
+ * Registers all tagged providers into the ProviderRegistry.
+ *
+ * @author Aleksey Razbakov <aleksey@razbakov.com>
+ */
+class ProviderPass implements CompilerPassInterface
+{
+    public function process(ContainerBuilder $container): void
+    {
+        if (!$container->hasDefinition(ProviderRegistry::class)) {
+            return;
+        }
+
+        $registry = $container->getDefinition(ProviderRegistry::class);
+        $taggedServices = $container->findTaggedServiceIds('ux_image.provider');
+
+        foreach ($taggedServices as $id => $tags) {
+            foreach ($tags as $attributes) {
+                $name = $attributes['name'] ?? $id;
+                $registry->addMethodCall('addProvider', [new Reference($id)]);
+            }
+        }
+    }
+}

src/Image/src/DependencyInjection/Configuration.php

@@ -0,0 +1,74 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Image\DependencyInjection;
+
+use Symfony\Component\Config\Definition\Builder\TreeBuilder;
+use Symfony\Component\Config\Definition\ConfigurationInterface;
+
+/**
+ * @author Aleksey Razbakov <aleksey@razbakov.com>
+ */
+class Configuration implements ConfigurationInterface
+{
+    public function getConfigTreeBuilder(): TreeBuilder
+    {
+        $treeBuilder = new TreeBuilder('ux_image');
+        $rootNode = $treeBuilder->getRootNode();
+
+        $rootNode
+            ->children()
+                ->scalarNode('default_provider')
+                    ->defaultValue('passthrough')
+                    ->info('The default provider to use when none is specified.')
+                ->end()
+                ->arrayNode('providers')
+                    ->useAttributeAsKey('name')
+                    ->arrayPrototype()
+                        ->children()
+                            ->scalarNode('pattern')->end()
+                            ->scalarNode('assets_path')->end()
+                            ->arrayNode('config')
+                                ->useAttributeAsKey('key')
+                                ->scalarPrototype()->end()
+                            ->end()
+                        ->end()
+                    ->end()
+                ->end()
+                ->arrayNode('breakpoints')
+                    ->useAttributeAsKey('name')
+                    ->integerPrototype()->end()
+                    ->defaultValue([
+                        'sm' => 640,
+                        'md' => 768,
+                        'lg' => 1024,
+                        'xl' => 1280,
+                        '2xl' => 1536,
+                    ])
+                ->end()
+                ->arrayNode('defaults')
+                    ->addDefaultsIfNotSet()
+                    ->children()
+                        ->scalarNode('format')->defaultValue('webp')->end()
+                        ->integerNode('quality')->defaultValue(80)->end()
+                        ->scalarNode('loading')->defaultValue('lazy')->end()
+                        ->scalarNode('fit')->defaultValue('cover')->end()
+                        ->scalarNode('focal')->defaultValue('center')->end()
+                        ->scalarNode('fallback')->defaultValue('lg')->end()
+                        ->scalarNode('fallback_format')->defaultValue('auto')->end()
+                    ->end()
+                ->end()
+            ->end()
+        ;
+
+        return $treeBuilder;
+    }
+}