Transformations

Media transformations are powerful ways to make transformations to your media to ensure that it will display correctly according to you design.

Usage

1{!!
2    $this->get('media')
3        ->first()
4        ->transformation('square') 
5!!}

See how each provider handles transformations.

Providers

Cloudinary

Cloudinary provides a vast set of transformations that you easily can hook into either through named transformation or by defining the transformations in your code.

If a derived image has been inserted via the media library, then that derived image will always take precedence over any transformations defined in your code.

Named transformations

Named transformation are likely the easiest way to use transformations in your code. Make sure you've created the named preset in Cloudinary first and then all you have to do is called the transformation method with the name of the preset you want to apply.

1{!!
2    $this->get('media')
3        ->first()
4        ->transformation('square') 
5!!}

---

Custom defined transformations

For more advanced transformations you also return a Transformation object. The Transformation::make() expects you to provide a closure which first argument is the media file that will be transformed. Please read the Cloudinary documentation for all available transformations.

1{!!
2    $this->get('media')
3        ->first()
4        ->transformation($this->roundedCorners()) 
5!!}

 1<?php
 2 
 3namespace App\Http\Sections;
 4 
 5use Cloudinary\Tag\ImageTag;
 6use Cloudinary\Transformation\Effect;
 7use Cloudinary\Transformation\FocusOn;
 8use Cloudinary\Transformation\Gravity;
 9use Cloudinary\Transformation\Resize;
10use Cloudinary\Transformation\RoundCorners;
11use Helix\Lego\Bricks\Media;
12use Helix\Lego\Http\Livewire\Section;
13use Helix\Lego\Media\Transformations\Transformation;
14 
15class Dummy extends Section
16{
17    public $media;
18 
19    public function bricks() : array
20    {
21        return [
22            'media' => Media::name('Transformed media'),
23        ];
24    }
25 
26    public function roundedCorners() 
27    {
28        return Transformation::make(function (ImageTag $media) {
29            return $media
30                ->resize(Resize::crop()
31                    ->width(400)
32                    ->height(400)
33                    ->gravity(Gravity::focusOn(FocusOn::face()))
34                )
35                ->roundCorners(RoundCorners::max())
36                ->resize(Resize::scale()->width(200))
37                ->backgroundColor('green');
38        });
39    }
40}