How to resize images?
twSylius uses LiipImagineBundle to handle image manipulation, including resizing and generating thumbnails.
For a full list of supported filters and configuration options, see the LiipImagineBundle filter documentation.
Where are image resizing filters defined?
In Sylius 2.x, image resizing filters are configured under liip_imagine
in your config/packages/liip_imagine.yaml
file. By default, Sylius provides a comprehensive set of filters for both the Admin and Shop interfaces.
Here are the default filters:
sylius_admin_product_original
Original
Full-size admin product image
sylius_admin_avatar
200x200
Admin avatar thumbnail
sylius_admin_product_large_thumbnail
600×800
Large product image in admin
sylius_admin_product_thumbnail
200×200
Generic admin thumbnail
sylius_shop_product_original
Original
Full-size shop product image
sylius_shop_product_small_thumbnail
300×400
Small product image in shop
sylius_shop_product_thumbnail
600×800
Main product thumbnail in shop
sylius_shop_product_large_thumbnail
1200×1600
Large product image in shop
sylius_small
120×90
Generic small image size
sylius_medium
240×180
Generic medium image size
sylius_large
640×480
Generic large image size
How to Apply Image Filters in Twig
Use the imagine_filter
Twig filter to apply it to an image path.
Example
<img src="{{ object.path|imagine_filter('sylius_small') }}" alt="Thumbnail" />
Sylius stores image paths (e.g. for products or avatars) in the path
field of image entities.
The default public path for media is /media/image
.
How to Edit existing filters
Let's assume you want to change the size of images under sylius_shop_product_large_thumbnail
filter to 100 x 200:
# config/packages/liip_imagine.yaml
liip_imagine:
filter_sets:
sylius_shop_product_large_thumbnail:
format: webp
quality: 80
filters:
thumbnail: { size: [ 100, 200 ], mode: inset }
Remember to clear cache after the changes!
php bin/console liip:imagine:cache:remove
How to Add Custom Image Resizing Filters
To define your own image resizing filter:
# config/packages/liip_imagine.yaml
liip_imagine:
filter_sets:
advert_banner:
filters:
thumbnail: { size: [800, 200], mode: inset }
Example Usage in Twig
<img src="{{ banner.path|imagine_filter('advert_banner') }}" alt="Banner" />
Learn More
Last updated
Was this helpful?