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

Add the ability to pass params through to the underlying ImageService #29

Open
wants to merge 2 commits into
base: 1.x
Choose a base branch
from

Conversation

chrispymm
Copy link

I've been really enjoying using Twill Image - it's made managing images within a site so much easier!

However while using it I came a cross a couple of things that couldn't be achieved with Twill Image due to the inability to pass parameters to the ImageService.

In one instance instance I wanted to greyscale an image and the the other, possibly more common use case would be to amend the quality of the image. When handling large banner images and high-density screens I tend to adjust the image quality down on the larger images for hiDPI screens as the density covers up the lower quality and it means a much smaller image can be delivered. reference

This PR adds the ability to pass a params array through the Image model to the ImageService

TwillImage::make($object, 'crop', null, ['q' => 50]);
$image = TwillImage::make($object, 'crop');

$image->params('filt' => 'sepia');

You can also add the params array into the preset array in twill-image.php

'presets' => [
    'art_directed' => [
        'crop' => 'desktop',
        'width' => 700,
        'params' => ['q' => 75],
    ]
],

It is also possible to pass the params via the sources array too - this allows for different params (quality settings) per media query.

'presets' => [
    'art_directed' => [
        'crop' => 'desktop',
        'width' => 700,
        'params' => ['q' => 75],
        'sizes' => '(max-width: 767px) 25vw, (min-width: 767px) and (max-width: 1023px) 50vw, 33vw',
        'srcSetWidths' => [350, 700, 1400],
        'sources' => [
                [
                    'crop' => 'mobile',
                    'media_query' => '(max-width: 767px)',
                    'srcSetWidths' => [100, 200, 400],
                ],
                [
                    'crop' => 'desktop',
                    'media_query' => '(min-width: 769px) and (-webkit-min-device-pixel-ratio: 1.5)',
                    'params' => ['q' => 40],
                    'srcSetWidths' => [1600, 2400],
                ],
            ]
    ]
],

This is tested as far as my use case goes - so this may not be feature-complete, and I expect it may require further work. But this was just a quickly put-together PR to see whether this is something you'd want in the library.

@ptrckvzn ptrckvzn added the enhancement New feature or request label Jan 20, 2022
@ptrckvzn
Copy link
Member

Hey @chrispymm, thanks for submitting a PR for this feature. I see some benefit of adding the eloquent ->params([...]) to the Image model and having the ability to add params to the preset. The only thing I am not sure is to add the option to the make method. I feel passing params doesn't belong to the make methods, but only has an option in preset or with a method params. Does it makes sense?

@ifox ifox changed the base branch from develop to 1.x January 21, 2022 20:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants