A Practical Guide for working with media and thumbnails in Shopware 6

A Practical Guide for working with media and thumbnails in Shopware 6

Today, your online store’s appearance significantly affects user interactions and purchases in the e-commerce landscape. A key element in creating an appealing shopping experience is managing media and thumbnails effectively. Shopware 6, a leading e-commerce platform, streamlines this process through features such as the `sw_thumbnails` Twig function. This guide will guide you on leveraging the capabilities of `sw_thumbnails` to simplify the handling of responsive images in your Shopware 6 store.

Understanding the Challenge

Creating responsive web pages, especially when it comes to adjusting images for various screen sizes, has been a challenge in the past. Developers had to manually write HTML code, specifying `img` and `srcset` attributes, to ensure images displayed well on different devices.

Shopware simplifies this process by automatically generating different thumbnails for each uploaded image, eliminating the need for manual coding. Developers can efficiently utilize this feature by employing the `sw_thumbnails` Twig function.

Setting Up Crop Sizes in the Backend

Before you start using `sw_thumbnails`, it’s crucial to set up the required crop sizes in the Shopware 6 backend. Head to the media folder within the settings and specify the crop sizes that match your particular requirements. This ensures that Shopware creates thumbnails of the right sizes for different screen dimensions.

Now that you’ve configured the crop sizes, you can make use of the `sw_thumbnails` Twig function to automatically generate the necessary `img` and `srcset` codes. Let’s explore an example:

{% sw_thumbnails 'my-thumbnails' with {
    media: cover,
    sizes: {
        'xs': '501px',
        'sm': '315px',
        'md': '427px',
        'lg': '333px',
        'xl': '284px',
} %}

In this example, we utilize the `sw_thumbnails` Twig function to establish a set of thumbnails with various sizes based on the screen width. The `media` parameter determines how the image should be cropped, while the `sizes` parameter outlines the image sizes for different breakpoints.


    srcset="http://shopware.local/media/06/f0/5c/1614258798/example-image.jpg 1921w, 
            http://shopware.local/thumbnail/06/f0/5c/1614258798/example-image_1920x1920.jpg 1920w, 
            http://shopware.local/thumbnail/06/f0/5c/1614258798/example-image_800x800.jpg 800w, 
            http://shopware.local/thumbnail/06/f0/5c/1614258798/example-image_400x400.jpg 400w" 
    sizes="(max-width: 1920px) and (min-width: 1200px) 284px,
           (max-width: 1199px) and (min-width: 992px) 333px, 
           (max-width: 991px) and (min-width: 768px) 427px, 
           (max-width: 767px) and (min-width: 576px) 315px, 
           (max-width: 575px) and (min-width: 0px) 501px, 100vw">

This output demonstrates the effectiveness of `sw_thumbnails` in automatically generating the required code for responsive image rendering. The `img` tag includes the `src` and `srcset` attributes, and the `sizes` attribute ensures proper display across a range of devices.


By utilising the `sw_thumbnails` Twig function in Shopware 6, you can streamline the management of media and thumbnails. This simplifies development and ensures that your online store delivers a visually appealing and responsive experience for users on different devices. For a practical guide to how ‘srcset’ and ‘sizes’ handle image sources, feel free to explore further details here.


Shopware 6's `sw_thumbnails` Twig function automates the generation of different image thumbnails based on predefined crop sizes. This simplifies the process of handling responsive images by eliminating the need for manual coding of `img` and `srcset` attributes.

To set up crop sizes, navigate to the media settings in the Shopware 6 backend. Within the media settings, specify the desired crop sizes that align with your requirements. These crop sizes will dictate the dimensions of the thumbnails generated by Shopware.

Yes, you can customize thumbnail sizes for various screen breakpoints using the `sw_thumbnails` Twig function. By specifying the sizes within the function's parameters, you can ensure that the generated thumbnails adapt seamlessly to different screen sizes and resolutions.

The `media` parameter in the `sw_thumbnails` Twig function determines how the image should be cropped to fit the specified dimensions. By selecting the appropriate media setting, you can ensure that thumbnails are cropped optimally for different display contexts, such as cover or contain.

Shopware 6 optimizes image loading performance by automatically generating `srcset` attributes within the `img` tags. This allows browsers to choose the most suitable image size based on the device's screen resolution and pixel density, thereby enhancing page loading speed and user experience.

Comments are closed.

2hats Logic HelpBot