How to resize images?¶
In Sylius we are using the LiipImagineBundle for handling images.
Tip
You will find a reference to the types of filters in the LiipImagineBundle in their documentation.
There are three places in the Sylius platform where the configuration for images can be found:
These configs provide you with a set of filters for resizing images to thumbnails.
|
size: original |
|
size: [50, 50] |
|
size: [550, 412] |
|
size: [150, 112] |
|
size: [64, 64] |
|
size: [50, 50] |
|
size: original |
|
size: [64, 64] |
|
size: [150, 112] |
|
size: [260, 260] |
|
size: [550, 412] |
|
size: [120, 90] |
|
size: [240, 180] |
|
size: [640, 480] |
How to resize images with filters?¶
Knowing that you have filters out of the box you need to also know how to use them with images in Twig templates.
The imagine_filter('name')
is a twig filter. This is how you would get an image path for on object item
with a thumbnail applied:
<img src="{{ object.path|imagine_filter('sylius_small') }}" />
Note
Sylius stores images on entities by saving a path
to the file in the database.
The imagine_filter root path is /public/media/image
.
How to add custom image resizing filters?¶
If the filters we have in Sylius by default are not suitable for your needs, you can easily add your own.
All you need to do is to configure new filter in the config/packages/liip_imagine.yaml
file.
For example you can create a filter for advertisement banners:
# config/packages/liip_imagine.yaml
liip_imagine:
filter_sets:
advert_banner:
filters:
thumbnail: { size: [800, 200], mode: inset }
How to use your new filter in Twig?
<img src="{{ banner.path|imagine_filter('advert_banner') }}" />