Shopware 6 background-image src-set

Question

{% block page_content_section %}
<div class="cms-section {{ sectionClasses|join(' ') }}"
     style="{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}{% if sectionBgImg %}background-image: url({{ sectionBgImg }});background-size: {{ section.backgroundMediaMode }};{% endif %}">

Is there a way to get the generated thumbnail for "sectionBgImg" for a better page performance. When I set a Background in Shopware Backend it will load the big image also on mobile.

Edit:

To clear things up: Usually shopware will include images via "sw_thumbnails" to optimize pictures for mobile devices. With the background image of sections it won't load the generated thumbnails of the image you set(see image). Is there a way to optimize this?

Answer 1

I found that Shopware is doing it a different way, when you add a background image to a CMS-Block. I adapted this approach from this file:

\vendor\shopware\storefront\Resources\views\storefront\section\cms-section-block-container.html.twig

Code for a mobile optimized background picture in sections.

{% sw_extends '@Storefront/storefront/page/content/detail.html.twig' %}
{% block page_content_section %}
<div class="cms-section {{ sectionClasses|join(' ') }}"
        style="{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}">


    {% if section.backgroundMedia %}
        {% sw_thumbnails 'cms-block-background' with {
            media: section.backgroundMedia,
            attributes: {
                class: "cms-block-background media-mode--" ~ section.backgroundMediaMode
            },
            sizes: {
                'sm': '400px',
                'md': '800px',
                'xl': '1920px'
            }
        } %}
    {% endif %}

    {% sw_include "@Storefront/storefront/section/cms-section-" ~ section.type ~ ".html.twig" %}
</div>
{% endblock %}

The CSS, please edit as needed for your Theme

.cms-section {

&.bg-image {
    position: relative;
    background-repeat: no-repeat;
    background-position: 50%;
}

.cms-block-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: none;
    font-family: 'object-fit: none;';

    &.media-mode--contain {
        object-fit: contain;
        font-family: 'object-fit: contain;';
    }

    &.media-mode--cover {
        object-fit: cover;
        font-family: 'object-fit: cover;';
    }
}