There are several options that can be used to manipulate the image. These can be chained.
- path
- webp
- retina
- dpr
- flip
- contain
- crop
- upscale
- rotate
- sharpen
- pixelate
- quality
- invert
- greyscale
- placeholder
- options
Path
path($path)The path option is used to specify the path to the original image within the storage/app/public directory.
Twig
{% set image = listing.images | first %}
<img src="{{ image_factory(150, 300).path(image.file) }}">
PHP
$image = image_factory(150, 300)->path($path);
Alternatively, the path can be provided as the third parameter in the initialisation of the instance:
Twig
{% set image = listing.images | first %}
<img src="{{ image_factory(150, 300, image.file) }}">
PHP
$image = image_factory(150, 300, $path);
WebP
webp()The webp option is used to serve a .webp (a modern lossless compression) image.
Twig
<img src="{{ image_factory(150, 300).webp() }}">
PHP
$image = image_factory(150, 300)->webp();
Retina
The retina option is used to serve an image that is twice the size (in pixels) of the designated dimensions.
For example, an image generated from image_factory(500, 500)->retina() would result in an image with dimensions 1000px by 1000px.
Twig
<img src="{{ image_factory(150, 300).retina() }}">
PHP
$image = image_factory(150, 300)->retina();
DPR
dpr($scale)The dpr option is used to scale the image dimensions.
Twig
<img src="{{ image_factory(150, 300).dpr(3.5) }}">
PHP
$image = image_factory(150, 300)->dpr(3.5);
Flip
flip()The flip option transforms the image by flipping the x-axis.
Twig
<img src="{{ image_factory(150, 300).dpr(3.5) }}">
PHP
$image = image_factory(150, 300)->flip();
Contain
contain()The contain option keeps the resized image within the dimensional constraints whilst retaining the original aspect ratio.
Twig
<img src="{{ image_factory(150, 300).contain() }}">
PHP
$image = image_factory(150, 300)->contain();
Crop
crop()The crop option scales the image to the dimensional constraints and removes any overflowing image from the canvas.
Twig
<img src="{{ image_factory(150, 300).crop() }}">
PHP
$image = image_factory(150, 300)->crop();
Upscale
upscale()The upscale option allows an image to be enlarged above it's real dimensions. By default, the image factory will not resize an image larger than it originally is, however, if you wish to force an aspect ratio, this option can be used.
Twig
<img src="{{ image_factory(150, 300).upscale() }}">
PHP
$image = image_factory(150, 300)->upscale();
Rotate
rotate($angle)The rotate option rotates the image by the given angle (in degrees counter-clockwise).
Twig
<img src="{{ image_factory(150, 300).rotate(90) }}">
PHP
$image = image_factory(150, 300)->rotate(90);
Sharpen
sharpen($amount)The sharpen option sharpens the image by the given amount (0 – 100).
Twig
<img src="{{ image_factory(150, 300).sharpen(25) }}">
PHP
$image = image_factory(150, 300)->sharpen(25);
Pixelate
pixelate($size)The pixelate option applies a pixelation effect to the image with a given size of pixels.
Twig
<img src="{{ image_factory(150, 300).pixelate(5) }}">
PHP
$image = image_factory(150, 300)->pixelate(5);
Quality
quality($percentage)The quality option sets the quality of the outputted image. The default is 80%.
Twig
<img src="{{ image_factory(150, 300).quality(95) }}">
PHP
$image = image_factory(150, 300)->quality(95);
Invert
invert()The invert option reverses all colors in the image.
Twig
<img src="{{ image_factory(150, 300).invert() }}">
PHP
$image = image_factory(150, 300)->invert();
Greyscale
greyscale()The greyscale option turns the image into a greyscale version.
Twig
<img src="{{ image_factory(150, 300).greyscale() }}">
PHP
$image = image_factory(150, 300)->greyscale();
Placeholder
placeholder($values)The placeholder option returns a placeholder string.
Twig
<img src="{{ image_factory(150, 300).placeholder('#ff000') }}">
PHP
$image = image_factory(150, 300)->placeholder('#ff0000');
By default, this is an encoded inline SVG path, which can be changed by setting a custom resolver:
PHP
\Aero\Store\Services\ImageFactory::setPlaceholderResolver(function ($image) {
return asset('placeholder.svg');
});
If using a custom resolver, the values passed into the placeholder can then be accessed using the $placeholderValues property:
Twig
<img src="{{ image_factory(150, 300).placeholder({type: 'product', category: 'dress'}) }}">
PHP
$image = image_factory(150, 300)->placeholder(['type' => 'product', 'category' => 'dress']);\Aero\Store\Services\ImageFactory::setPlaceholderResolver(function ($image) {
return asset("placeholder-{$image->placeholderValues['type']}.svg#{$image->placeholderValues['category']}");
});
Options
options($options)The options option allows multiple options to be specificed by calling one method. The individual options can either be passed as separate arguments or as an array.
Twig
<img src="{{ image_factory(150, 300).options('crop', {pixelate: 100}, {quality: 30}) }}">
// or ...
<img src="{{ image_factory(150, 300).options(['crop', {pixelate: 100}, {quality: 30}]) }}">
PHP
$image = image_factory(150, 300)->options('crop', ['pixelate' => 100], ['quality' => 30]);
// or ...
$image = image_factory(150, 300)->options(['crop', ['pixelate' => 100], ['quality' => 30]]);