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.

Output:

<img 
    src="http://shopware.local/media/06/f0/5c/1614258798/example-image.jpg" 
    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.

Conclusion

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.