diff --git a/README.md b/README.md index 0d3b752..f813f0b 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ Twill Image is a package designed to work with [Twill](https://twill.io) to disp - [`sizes`](#sizes) - [`columns`](#columns) - [`srcSetWidths`](#srcSetWidths) + - [`params`](#params) - [`preset`](#preset) - [`render`](#render) - [`toArray`](#toArray) @@ -100,10 +101,10 @@ The JavaScript module is not required. If you prefer to rely only on the browser The `Image` model allows you to interact fluently with a media object. ```php -$image = new A17\Twill\Image\Models\Image($object, $role, $media); +$image = new A17\Twill\Image\Models\Image($object, $role, $media, $params); // or using the Facade -$image = TwillImage::make($object, $role, $media); +$image = TwillImage::make($object, $role, $media, $params); ``` |Argument|Type|Default|Description| @@ -111,6 +112,7 @@ $image = TwillImage::make($object, $role, $media); |`$object` (Required)|`A17\Twill\Models\Media` `A17\Twill\Models\Block` `object`| |Your Twill module or block object| |`$role` (Required)|`string`| |`Media` role| |`$media`|`A17\Twill\Models\Media`|`null`|`Media` instance| +|`$params`|`array`|`[]`|Array of extra parameters for the ImageService #### Available methods @@ -154,6 +156,7 @@ $image->crop('desktop')->sources([ 'crop' => 'mobile', // required 'width' => 200, // optional 'height' => 200, // optional + 'params' => ['q'=> 60], //optional 'srcSetWidths' => [100, 200, 400], // optional ], [ @@ -219,6 +222,14 @@ Use this method to give a list a widths to generate the `srcset` attribute. With $image->srcSetWidths([100, 150, 300, 600, 1200, 2000, 2400, 3600, 5000]); ``` +##### `params` + +This method allows you to pass an array of extra params for the underlying ImageService (e.g. Imgix,Glide). + +```php +$image->params(['q' => 50, 'filt' => 'greyscale']); +``` + ##### `preset` With this method you can use an object to pass a value to any of the above methods. You can also add a preset key to the config `config/twill-image.php` and pass the name to this method. @@ -232,6 +243,7 @@ return [ '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' => [ diff --git a/src/Models/Image.php b/src/Models/Image.php index 8abe0d5..903a300 100644 --- a/src/Models/Image.php +++ b/src/Models/Image.php @@ -42,6 +42,11 @@ class Image implements Arrayable */ protected $height; + /** + * @var array The imageservice params + */ + protected $params; + /** * @var array The media sources */ @@ -62,7 +67,7 @@ class Image implements Arrayable * @param string $role * @param null|Media $media */ - public function __construct($object, $role, $media = null) + public function __construct($object, $role, $media = null, $params = []) { $this->object = $object; @@ -70,10 +75,13 @@ public function __construct($object, $role, $media = null) $this->media = $media; + $this->params = $params; + $this->mediaSourceService = new MediaSource( $this->object, $this->role, - $this->media + $this->media, + $this->params, ); $columnsServiceClass = config('twill-image.columns_class', ImageColumns::class); @@ -183,6 +191,19 @@ public function sizes($sizes) return $this; } + /** + * Set extra image service params + * + * @param array $params + * @return $this + */ + public function params($params) + { + $this->params = $params; + + return $this; + } + /** * Set alternative sources for the media. * @@ -211,6 +232,7 @@ public function sources($sources = []) $source['width'] ?? null, $source['height'] ?? null, $source['srcSetWidths'] ?? [], + $source['params'] ?? [], )->toArray() ]; } @@ -262,6 +284,10 @@ protected function applyPreset($preset) $this->height($preset['height']); } + if (isset($preset['params'])) { + $this->params($preset['params']); + } + if (isset($preset['sizes'])) { $this->sizes($preset['sizes']); } diff --git a/src/Services/MediaSource.php b/src/Services/MediaSource.php index d5a7fc8..9d609dd 100644 --- a/src/Services/MediaSource.php +++ b/src/Services/MediaSource.php @@ -33,6 +33,8 @@ class MediaSource implements Arrayable protected $imageArray; + protected $params; + /** * Create an instance of the service * @@ -40,28 +42,30 @@ class MediaSource implements Arrayable * @param string $role * @param array $args * @param Media|object|null $media - * @param int[] $srcSetWidths + * @param array $params */ - public function __construct($object, $role, $media = null) + public function __construct($object, $role, $media = null, $params = []) { $this->setModel($object); $this->role = $role; $this->media = $media; + $this->params = $params; } - public function generate($crop = null, $width = null, $height = null, $srcSetWidths = []) + public function generate($crop = null, $width = null, $height = null, $srcSetWidths = [], $params=[]) { $this->setCrop($crop); $this->setWidth($width); $this->setHeight($height); + $this->setParams($params); $this->setImageArray(); $this->srcSetWidths = $srcSetWidths; return $this; } - + protected function setModel($object) { if (!classHasTrait($object, 'A17\Twill\Models\Behaviors\HasMedias')) { @@ -112,12 +116,17 @@ protected function setHeight($height) $this->height = $height ?? null; } + public function setParams($params) + { + $this->params = $params ?? []; + } + protected function setImageArray() { $this->imageArray = $this->model->imageAsArray( $this->role, $this->crop, - [], + $this->params, $this->media, ); @@ -144,7 +153,7 @@ protected function params($width, $height = null, $format = null) $args['fm'] = $format; } - return $args; + return array_merge($this->params, $args); } protected function calcHeightFromWidth($width) diff --git a/src/TwillImage.php b/src/TwillImage.php index 0307790..a86c680 100644 --- a/src/TwillImage.php +++ b/src/TwillImage.php @@ -14,11 +14,12 @@ class TwillImage * @param object|Model|Block $object * @param string $role * @param null|Media $media + * @param null|array $params * @return Image */ - public function make($object, $role, $media = null) + public function make($object, $role, $media = null, $params = []) { - return new Image($object, $role, $media); + return new Image($object, $role, $media, $params); } /**