Configuring Image Sizes for Individual Devices Width

In Shopsys Framework you can configure image sizes for individual devices width. This is allowed by HTML element Picture element (see more in Mozilla official documentation).

Introduction

This document serves for introducing you with the process of managing images on Shopsys Framework.

Tip

In order to get correct image sizes of additional images then your original image must be larger than highest size in additional image size.

Configuration file

In order to set right sizes for individual devices width you have to configure config/images.yaml.

Let us explain example code in configuration file images.yaml of attribute additionalSizes. The following code show section product with types gallery and main.

-   name: product
    class: Shopsys\FrameworkBundle\Model\Product\Product
    types:
        -   name: gallery
            multiple: true
            sizes:
                -   name: detail
                    width: 200
                    height: 300
                    crop: false
                    occurrence: 'Front-end: Product detail, when selected'
                    additionalSizes:
                       - {width: 1100, height: ~, media: "(min-width: 1200px)"}
                       - {width: 275, height: ~, media: "(max-width: 480px)"}
                -   name: list
                    width: 100
                    height: 100
                    crop: true
                    occurrence: 'Front-end: Product detail'
        -   name: main
            sizes:
                -   name: ~
                    width: 200
                    height: 300
                    crop: false
                    occurrence: 'Front-end: Product detail, Product list'

For type gallery and size detail are set two additional sizes. First is image width 1100px for devices with minimal width 1200px. Second one is image width 275px for devices with maximal width 480px. In other cases there is image with width 200px.

How to generate images with modified sizes

In case you modified image sizes in file images.yaml, then would be needed to remove yet generated images. You approach that by removing images for modified size name of appropriate section. Folder path would look like web/content/images/<section-name>/<type-name>.

Warning

Be aware of not removing folder original in path web/content/images/<section-name>.

Example

Assume we want to add new image size for the main image above gallery at the product detail page. We want affect only devices with maximal browser width 480px. Image size for new device width should be 410px. You can achieve that by following steps.

1. Add new value for attribute product.gallery.detail.additionalSizes in configuration file images.yaml.

    -   name: product
        class: Shopsys\FrameworkBundle\Model\Product\Product
        types:
            -   name: gallery
                multiple: true
                sizes:
                    -   name: detail
                        width: 200
                        height: 300
                        crop: false
                        occurrence: 'Front-end: Product detail, when selected'
+                       additionalSizes:
+                           - {width: 410, height: ~, media: "(max-width: 480px)"}

2. Remove all images in web/content/images/product/default.

This step is applied only if there already exist some generated images for additional sizes.