Add Symfony UX Image component (Slim v1)#3549
Conversation
Addresses maintainer feedback from PR symfony#3188: - No hard dependencies (liip/imagine-bundle removed from require) - PassThroughProvider as default — works with local files out of the box - UrlPatternProvider for generic CDN integration via URL templates - Objects (ImageConfig) instead of arrays for internal data - No PreloadManager (Google advises against preload for SSR) - Component names: ux:img and ux:picture (avoid conflicts) - Three usage modes: TwigComponent, {{ component() }}, {{ ux_image() }} - Target Symfony UX 3.x (PHP 8.4+, Symfony 7.4|8.0)
carsonbot
changed the title
There was a problem hiding this comment.
The file is empty; you need the associated content.
You can find it on other components.
| @@ -0,0 +1,5 @@ | |||
| # CHANGELOG | |||
|
|
|||
| ## 2.32.0 | |||
There was a problem hiding this comment.
| ## 2.32.0 | |
| ## 3.1 |
|
|
||
| foreach ($taggedServices as $id => $tags) { | ||
| foreach ($tags as $attributes) { | ||
| $name = $attributes['name'] ?? $id; |
| "twig/twig": "^3.0" | ||
| }, | ||
| "require-dev": { | ||
| "friendsofphp/php-cs-fixer": "^3.65", |
| @@ -0,0 +1,19 @@ | |||
| <?xml version="1.0" encoding="UTF-8"?> | |||
There was a problem hiding this comment.
Review the file to make it look something like this: https://github.com/symfony/ux/blob/3.x/src/Native/phpunit.xml.dist.
|
The documentation should be added. |
| return []; | ||
| } | ||
|
|
||
| $breakpointOrder = ['sm', 'md', 'lg', 'xl', '2xl']; |
There was a problem hiding this comment.
A user who configures ux_image.breakpoints with different names (e.g. mobile, tablet) will get empty cascades. Same issue for Transformer::BREAKPOINT_ORDER.
| */ | ||
| class Transformer | ||
| { | ||
| private const BREAKPOINT_ORDER = ['default', 'sm', 'md', 'lg', 'xl', '2xl']; |
There was a problem hiding this comment.
A user who configures ux_image.breakpoints with different names (e.g. mobile, tablet) will get empty cascades.
| @@ -0,0 +1,89 @@ | |||
| <?php | |||
There was a problem hiding this comment.
This class is never used.
| public function getFunctions(): array | ||
| { | ||
| return [ | ||
| new TwigFunction('ux_image', [$this, 'renderImage']), |
There was a problem hiding this comment.
| new TwigFunction('ux_image', [$this, 'renderImage']), | |
| new TwigFunction('ux_image', [$this, 'renderImage'], ['is_safe' => ['html']]), |
| @@ -0,0 +1,111 @@ | |||
| <?php | |||
There was a problem hiding this comment.
You would need to have Lazy-Loaded Twig Extensions and therefore have the ImageExtension and ImageRuntime classes
| * export-ignore | ||
| .gitattributes export-ignore | ||
| .gitignore export-ignore | ||
| .php-cs-fixer.dist.php export-ignore | ||
| phpunit.dist.xml export-ignore | ||
| tests/ export-ignore |
There was a problem hiding this comment.
| * export-ignore | |
| .gitattributes export-ignore | |
| .gitignore export-ignore | |
| .php-cs-fixer.dist.php export-ignore | |
| phpunit.dist.xml export-ignore | |
| tests/ export-ignore | |
| /.git* export-ignore | |
| /.symfony.bundle.yaml export-ignore | |
| /doc export-ignore | |
| /phpunit.xml.dist export-ignore | |
| /tests export-ignore |
|
@KindImagination, I’ve given you some initial feedback that you can already start correcting. |
3 participants
Summary
Slim v1 of
symfony/ux-image— responsive image components addressing all feedback from the original PR #3188.What's Included
<twig:ux:img>— Simple responsive images100vw md:80vw)densities="x1 x2")<twig:ux:picture>— Art directionsm:1:1 md:16:9)Key Changes from Original PR
liip/imagine-bundleinrequirePassThroughProviderworks out of the boxImageConfigvalue objectux:img/ux:picture{{ ux_image() }}Provider Architecture
ProviderInterfaceand tag withux_image.providerUsage
Configuration
This addresses feedback from @WebMamba, @smnandre, and @Kocal on the original PR. Happy to iterate further!