Shortcut image rendering

Author: smnandre

src/Image/config/services.php

@@ -191,6 +191,7 @@
     $services->set('ux_image.twig.runtime', ImageRuntime::class)
         ->arg('$renderer', service(ImageRendererInterface::class))
         ->tag('twig.runtime')
+        ->tag('ux.twig_component.twig_renderer', ['key' => 'ux:image'])
     ;
 
     $services->set('ux_image.twig.extension', ImageExtension::class)

src/Image/doc/integrations.md

@@ -134,8 +134,8 @@ The Twig functions are the lowest-friction rendering API:
 Use `<twig:ux:image>` when the application already composes TwigComponents.
 The component service is registered only when `TwigComponentBundle` is active
 in the kernel; merely having the package in `vendor/` does not enable it.
-Override its template at
-`templates/bundles/UXImageBundle/components/Image.html.twig`.
+The self-closing component renders directly through the UX Image runtime; pass
+classes and other safe HTML attributes on the component itself.
 
 Prefer styling an application-owned wrapper or class over replacing the
 semantic `<picture>` structure. Bootstrap, Tailwind and custom design systems

src/Image/doc/rendering.md

@@ -86,9 +86,9 @@ When `symfony/ux-twig-component` is installed **and**
 />
 ```
 
-The `<twig:ux:image>` component renders via `ux_picture()` internally. The template is at
-`templates/components/Image.html.twig` and can be overridden under
-`templates/bundles/UXImageBundle/components/Image.html.twig`.
+Like `<twig:ux:icon>` and `<twig:ux:map>`, the self-closing component uses a
+dedicated TwigComponent runtime renderer. It produces the same `<picture>`
+markup as `ux_picture()` without loading an intermediate component template.
 
 ## HTML output
 
@@ -291,17 +291,6 @@ return new Response($rendered->toHtml());
 In Twig, both functions return a string. Pipe through `|raw` is not needed as the functions
 already output safe HTML.
 
-## Overriding templates
-
-The TwigComponent template lives at:
-`vendor/symfony/ux-image/templates/components/Image.html.twig`
-
-Override it by creating:
-`templates/bundles/UXImageBundle/components/Image.html.twig`
-
-The override receives the same `rendered` variable (`RenderedImage` object) with `toHtml()` and
-`toImgHtml()` methods.
-
 ## Reference
 
 ### Twig functions

src/Image/src/Twig/Components/Image.php

@@ -12,19 +12,14 @@
 namespace Symfony\UX\Image\Twig\Components;
 
 use Symfony\UX\Image\ImageAsset;
-use Symfony\UX\Image\Renderer\ImageRenderOptions;
-use Symfony\UX\Image\Renderer\RenderedImage;
-use Symfony\UX\Image\Twig\ImageRuntime;
-use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
-use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
-use Twig\Extra\Html\HtmlExtension;
 
 /**
  * Twig component for rendering images with responsive features.
  *
  * @author Simon André <smn.andre@gmail.com>
+ *
+ * @internal
  */
-#[AsTwigComponent('ux:image')]
 final class Image
 {
     public ?ImageAsset $src = null;
@@ -37,34 +32,4 @@ final class Image
     public ?string $sizes = null;
     public ?string $fetchpriority = null;
     public ?string $decoding = 'async';
-
-    private ?RenderedImage $rendered = null;
-
-    public function __construct(private readonly ImageRuntime $runtime)
-    {
-    }
-
-    #[ExposeInTemplate]
-    public function rendered(array $attributes = []): ?RenderedImage
-    {
-        if (!$this->src) {
-            return null;
-        }
-
-        foreach ($attributes as $name => $value) {
-            $attributes[$name] = HtmlExtension::htmlAttrValue($name, $value);
-        }
-
-        return $this->rendered ??= $this->runtime->render($this->src, new ImageRenderOptions(
-            sizes: $this->sizes,
-            alt: $this->alt ?? '',
-            lazy: $this->lazy,
-            fetchPriority: $this->fetchpriority ?? ($this->lazy ? 'auto' : 'high'),
-            class: $this->class ?? '',
-            decoding: $this->decoding ?? 'async',
-            variant: $this->variant,
-            srcset: $this->srcset,
-            attributes: $attributes,
-        ));
-    }
 }

src/Image/src/Twig/ImageRuntime.php

@@ -15,19 +15,47 @@
 use Symfony\UX\Image\Renderer\ImageRendererInterface;
 use Symfony\UX\Image\Renderer\ImageRenderOptions;
 use Symfony\UX\Image\Renderer\RenderedImage;
+use Twig\Extension\RuntimeExtensionInterface;
+use Twig\Extra\Html\HtmlExtension;
 
 /**
  * Runtime helpers used by the ux_image Twig component.
  *
  * @author Simon André <smn.andre@gmail.com>
  */
-final class ImageRuntime
+final class ImageRuntime implements RuntimeExtensionInterface
 {
     public function __construct(private ImageRendererInterface $renderer)
     {
     }
 
-    public function render(ImageAsset $asset, ?ImageRenderOptions $options = null): RenderedImage
+    /**
+     * @param array<string, mixed> $args
+     */
+    public function render(array $args = []): string
+    {
+        $asset = $args['src'] ?? null;
+        unset($args['src']);
+
+        if (null === $asset) {
+            return '';
+        }
+        if (!$asset instanceof ImageAsset) {
+            throw new \TypeError(\sprintf('The "src" argument must be an instance of "%s", "%s" given.', ImageAsset::class, get_debug_type($asset)));
+        }
+
+        $options = array_intersect_key($args, array_flip(['sizes', 'alt', 'lazy', 'fetchpriority', 'class', 'decoding', 'variant', 'srcset']));
+        $attributes = array_diff_key($args, $options);
+        foreach ($attributes as $name => $value) {
+            $attributes[$name] = HtmlExtension::htmlAttrValue($name, $value);
+        }
+        $options['attributes'] = $attributes;
+        $options['fetchpriority'] ??= false === ($options['lazy'] ?? true) ? 'high' : 'auto';
+
+        return $this->renderPicture($asset, $options);
+    }
+
+    private function renderAsset(ImageAsset $asset, ?ImageRenderOptions $options = null): RenderedImage
     {
         return $this->renderer->render($asset, $options);
     }
@@ -63,7 +91,7 @@ public function renderConfigured(ImageAsset $asset, array $options = []): Render
         $srcset = $options['srcset'] ?? null;
         $attributes = $options['attributes'] ?? [];
 
-        return $this->render($asset, new ImageRenderOptions(
+        return $this->renderAsset($asset, new ImageRenderOptions(
             sizes: \is_string($sizes) ? $sizes : null,
             alt: \is_string($alt) ? $alt : '',
             lazy: \is_bool($lazy) ? $lazy : true,
@@ -83,32 +111,32 @@ class: \is_string($class) ? $class : '',
      */
     public function getSources(ImageAsset $asset): array
     {
-        return $this->render($asset)->sources;
+        return $this->renderAsset($asset)->sources;
     }
 
     /**
      * Returns the fallback src URL using the first jpeg variant or the asset path.
      */
     public function getFallbackSrc(ImageAsset $asset): string
     {
-        return $this->render($asset)->fallbackSrc;
+        return $this->renderAsset($asset)->fallbackSrc;
     }
 
     /**
      * Returns srcset string for the fallback <img> tag.
      */
     public function getFallbackSrcset(ImageAsset $asset): ?string
     {
-        return $this->render($asset)->fallbackSrcset;
+        return $this->renderAsset($asset)->fallbackSrcset;
     }
 
     public function getWidth(ImageAsset $asset): ?int
     {
-        return $this->render($asset)->width;
+        return $this->renderAsset($asset)->width;
     }
 
     public function getHeight(ImageAsset $asset): ?int
     {
-        return $this->render($asset)->height;
+        return $this->renderAsset($asset)->height;
     }
 }

src/Image/templates/components/Image.html.twig

@@ -18,8 +18,10 @@
 use Symfony\Component\Config\Loader\LoaderInterface;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\HttpKernel\Kernel;
+use Symfony\UX\Image\ImageAsset;
 use Symfony\UX\Image\UXImageBundle;
 use Symfony\UX\TwigComponent\TwigComponentBundle;
+use Twig\Environment;
 
 /**
  * @requires class Symfony\Bundle\FrameworkBundle\FrameworkBundle
@@ -57,6 +59,28 @@ public function testBundleSetsParameters()
 
         $kernel->shutdown();
     }
+
+    public function testTwigComponentUsesRuntimeRenderer()
+    {
+        $kernel = new UxImageTestKernel('test', true);
+        $kernel->boot();
+
+        $twig = $kernel->getContainer()->get('test.service_container')->get('twig');
+        self::assertInstanceOf(Environment::class, $twig);
+        $template = $twig->createTemplate('<twig:ux:image :src="asset" alt="Photo" :lazy="false" id="hero" />');
+        $html = $template->render([
+            'asset' => new ImageAsset('default', 'https://example.com/photo.jpg', width: 1200, height: 800),
+        ]);
+
+        self::assertStringStartsWith('<picture>', $html);
+        self::assertStringContainsString('src="https://example.com/photo.jpg"', $html);
+        self::assertStringContainsString('alt="Photo"', $html);
+        self::assertStringContainsString('loading="eager"', $html);
+        self::assertStringContainsString('fetchpriority="high"', $html);
+        self::assertStringContainsString('id="hero"', $html);
+
+        $kernel->shutdown();
+    }
 }
 
 class UxImageTestKernel extends Kernel