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.

sylius_admin_product_original size: original
sylius_admin_admin_user_avatar_thumbnail size: [50, 50]
sylius_admin_product_large_thumbnail size: [550, 412]
sylius_admin_product_small_thumbnail size: [150, 112]
sylius_admin_product_tiny_thumbnail size: [64, 64]
sylius_admin_product_thumbnail size: [50, 50]
sylius_shop_product_original size: original
sylius_shop_product_tiny_thumbnail size: [64, 64]
sylius_shop_product_small_thumbnail size: [150, 112]
sylius_shop_product_thumbnail size: [260, 260]
sylius_shop_product_large_thumbnail size: [550, 412]
sylius_small size: [120, 90]
sylius_medium size: [240, 180]
sylius_large 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') }}" />