Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5.x] Driver based image manipulation with render tag #10204

Draft
wants to merge 36 commits into
base: 5.x
Choose a base branch
from

Conversation

jasonvarga
Copy link
Member

@jasonvarga jasonvarga commented May 28, 2024

Warning

This is very much a work in progress.

Currently, all image manipulation is fairly tightly integrated with Glide.

This PR introduces the concept of driver-based image manipulation. Glide will continue to ship as the default, but it will become easier to swap it out for other services such as Imgix, Cloudinary, Cloudflare Images, etc.

This will also introduce a new render tag which will be essentially identical to the glide tag but allow you to use any driver. For example, if you were to use the imgix driver, you'd be able to use their face detection and background removal features:

{{ render:image
    w="100" h="200"
    fit="facearea" faceindex="1" facepad="2"
    bg-remove="true" }}

This is aimed to be introduced in the 5.x line at some point, so everything should be backwards compatible. You will be able to opt into it by either using the new render tag, or by customizing your image manipulation config file.

return [
    'default' => env('STATAMIC_IMAGE_MANIPULATION_DRIVER', 'glide'),

    'manipulators' => [
        'glide' => [
            'driver' => 'glide',
            'library' => 'gd',
            'cache' => public_path('img'),
        ],

        'imgix' => [
            'driver' => 'imgix',
            'url' => 'myaccount.imgix.net',
            'key' => env('IMGIX_KEY'),
        ],
    ],
];
  • Imgix with multiple asset container handling
  • Preset "unpacking". Presets are a Glide feature, but they make sense anywhere. We could continue to let you define presets but instead of passing ?p=whatever as a param, it would unpack them and do ?w=100&h=100&etc=
  • Parameter aliases (e.g. width => w)
  • The magical fit="crop_focal" param only works for glide. Needs to be smarter. e.g. glide wants ?fit=crop-1-1-1 but imgix wants something like ?fit=crop&crop=focalpoint&fp-x=1&fp-y=1&fp-z=1
  • Container specific drivers,
    • Log/error appropriately depending on environment
  • Resolve Glide image cache wrong permissions (ignoring umask?) #8199
  • Include [5.x] Custom asset thumbnails #10594 somehow

Dedicated classes to represent sources now replace
- awkward string|Asset union types
- SourceType enum. the class itself is the identifier of the type.

All source classes can return an asset.
- For external urls, they will be null
- For assets obviously the asset
- For asset ids it will resolve the asset by id
- For paths it will attempt to resolve by url from the root. This happens for the existing implementation.

Render tag:
- The driver method accepts the raw source and converts it to the class.
- Uses the new source ahead of time to resolve the focal point when using fit="crop_focal"
@godismyjudge95
Copy link
Contributor

Would this be something in the future where Statamic itself would support a certain number of popular image providers by default? Or would they all be addon based? Just curious because we use Cloudflare images as our image provider.

@jasonvarga
Copy link
Member Author

Cloudflare images is probably a good one to also support natively.

# Conflicts:
#	src/Facades/Glide.php
#	src/Http/Controllers/CP/Assets/ThumbnailController.php
#	src/Imaging/ImageGenerator.php
Adding focal point params is upcoming and this will make it consistent and clearer that we don't want to override the entire the entire array of params.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants