How to resize images?

Sylius uses LiipImagineBundlearrow-up-right to handle image manipulation, including resizing and generating thumbnails.

circle-check

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:

Filter Name
Size (px)
Description

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

circle-check

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:

circle-exclamation

How to Add Custom Image Resizing Filters

To define your own image resizing filter:

Example Usage in Twig


Learn More

Last updated

Was this helpful?