Evolve Docs

Appearance

Image Rendering ​

Render and manipulate images on the fly

Basic usage ​

You can generate image URLs by using the image helper function. The function accepts a Media model instance or a static asset filename as the first argument.

blade
<img src="{{ image($block->image) }}">

// or

<img src="{{ image('logo.png') }}">

You can also pass a tuple of width and height as the second argument to define the image size.

blade
<img src="{{ image($media, [300, 300]) }}">

Pass a string or an array of filters as the third argument to apply filters to the image.

blade
<img src="{{ image($media, [300, 300], ['crop', 'bw']) }}">

URL format ​

The image helper function generates URLs in the following format:

Media model ​

  • Format: /img/imageId/options/name.format
ada
/img/dGVpG23oQz/300x0_fit/my-image.jpg

Static assets ​

You can also render static assets located inside your public/images directory by only passing the filename.

  • Format: /img/assetFile/options/name.format
ada
/img/logo.png/300x0_fit/logo.png

Filters/Manipulations ​

You can manipulate an image on the fly by defining size and filter options in the URL section after the image identifier:

Format:

  • /img/dGVpG23oQz/widthxheight/my-image.jpg
  • /img/dGVpG23oQz/widthxheight_filters/my-image.jpg

Resize to fit (default) ​

Resizes the image to fit into 300 x 300 px and keep the current aspect-ratio.

csharp
/300x300/
// or
/300x300_fit/

Resize and fill ​

Resizes the image to fit into 300 x 300 px by keeping the current aspect-ratio and filling the rest of the image with a given color (Default is white).

csharp
/300x300_fill/

Fill color ​

You can pass any RGB value with the fill filter to define a custom color (red in this example):

csharp
/300x300_fill[255,0,0]/

Crop ​

Resizes the image to 300 x 300 px and crops from top/bottom or sides.

csharp
/300x300_crop/

Focus point ​

You can also set where the image is cropped by adding a crop position (Accepts x,y values (0-1) or keywords like top-left, top, top-right, left, center, right, bottom-left, bottom or bottom-right).

csharp
/300x300_crop[top-left]/

// or

/300x300_crop[0.25,0]/

Flip ​

Flip/mirror an image horizontally (default) or vertically (Accepts h or v).

csharp
/300x300_flip/

// or

/300x300_flip[v]/
/300x300_flip[h]/

Contrast ​

Change contrast with the contrast filter. You can pass a value to define the amount (between 0 - 2, where 1 would be no change in contrast):

csharp
// more contrast (120%)
/300x300_contrast[1.2]/

// less contrast (50%)
/300x300_contrast[0.5]/

Brightness ​

Change brightness with the brightness filter. You can pass a value to define the amount (between 0 - 2, where 1 would be no change in brightness, values > 1 would lighten the image, values < 0 would darken the image):

csharp
// lighten (120% brightness)
/300x300_brightness[1.2]/

// darken (75% brightness)
/300x300_brightness[0.75]/

Blur ​

Blur an image. Accepts blur amount between 0 - 100 (default: 25).

csharp
// default blur (25)
/300x300_blur/

// specific blur amount
/300x300_blur[50]/

Grayscale (Black/White) ​

Make an image black and white.

csharp
/300x300_bw/

Invert colors ​

Inverts the colors of an image.

csharp
/300x300_invert/

Pixelate ​

Pixelate an image. (Accepts size as a pixel value)

csharp
/300x300_pixelate[25]/

Copyright text ​

Places a copyright text in the botom left corner of an image. Accepts custom font size in pixel value (default: 22).

csharp
/300x300_copy/

// Customize font size
/300x300_copy[42]/

INFO

The copyright filter is best used as a global filter or tag filter to prevent someone to just remove the copyright part from the URL.

Combining Filters ​

You can combine any manipulation filters by separating them with _.

csharp
// - Crop to 300x300 with position top-left
// - Make black and white
// - Adjust contrast to 1.2 (120%)
// - Blur image with amount 50
// - Invert the colors

/300x300_crop[top-left]_bw_contrast[1.2]_blur[50]_invert/

Important

Filters are applied in the order you define them in the URL.

Custom Filters ​

You can create custom image manipulators/filters by making a new class which implements the Intervention\Image\Filters\FilterInterface interface from Intervention Image.

php
class MyCustomFilter implements FilterInterface
{
    public function __construct(
        protected ?int $width = null,
        protected ?int $height = null,
        protected ?array $options = null,
        protected ?Media $image = null,
    ) {
    }

    public function applyFilter(Image $image)
    {
        // do something with the $image object

        return $image;
    }
}

Your class will receive width, height, the options array and the image Media model as constructor arguments.

Registering Your Custom Filters ​

After creating your own custom image filter, you will need to register it in the config/image.php config file:

php
'filters' => [
    ...
    'my-custom-filter' => \App\ImageFilters\MyCustomFilter::class,
],

You can now use your custom filter with the key defined in the config array.

Global Filters ​

Global filters will be applied on every image without specifiying it in the URL.

You can define some filters as global by adding their name to the global-filters array in the config/image.php config file.

Example: All images will receive the fit and bw (Grayscale) filters.

php
'global-filters' => [
    'fit', 'bw'
],

Tag Filters ​

Tag filters will be applied on every image with a given tag value (without specifiying it in the URL).

You can define them as tag filters by adding an array of tag names to the tag-filters in the config/image.php config file.

Example:
Images with the tag value of fancy will receive the filters defined in the array.

php
'tag-filters' => [
    'fancy' => [
        'bw', 'contrast[1.2]', 'brightness[0.8]'
    ],
]