Shopware 6 — набор фоновых изображений src-set
{% 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 %}">
Есть ли способ получить созданный эскиз для «sectionBgImg» для повышения производительности страницы. Когда я устанавливаю фон в Shopware Backend, большое изображение также загружается на мобильный телефон.
Редактировать:
Чтобы прояснить ситуацию: обычно программное обеспечение для магазинов включает изображения через «sw_thumbnails», чтобы оптимизировать изображения для мобильных устройств. С фоновым изображением разделов не будут загружаться сгенерированные миниатюры установленного вами изображения (см. изображение). Есть ли способ оптимизировать это?
спасибо за отзыв, попытался прояснить ситуацию
Ответы 2
Да, подход HTML <picture> очень хорош, когда дело касается адаптивной обработки изображений. Вам следует использовать его поверх старого школьного фонового изображения.
В вашем случае вам нужен медиа-объект этого изображения. sectionBgImg — это просто оболочка для URL-адреса мультимедиа.
Переменная для всего медиа-объекта — section.backgroundMedia.
Итак, вы можете использовать section.backgroundMedia с sw_thumbnails:
{% sw_thumbnails 'my-section-bg' with {
media: section.backgroundMedia
} %}
Для дальнейшего объяснения обработки миниатюр: https://developer.shopware.com/docs/guides/plugins/plugins/storefront/use-media-thumbnails.html#working-with-sw-thumbnail
Да, это то, что я искал. Еще немного. Я нашел способ сделать это.
Я обнаружил, что Shopware делает это по-другому, когда вы добавляете фоновое изображение в блок CMS. Я адаптировал этот подход из этого файла:
\vendor\shopware\storefront\Resources\views\storefront\section\cms-section-block-container.html.twig
Код для оптимизированного для мобильных устройств фонового изображения в разделах.
{% 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 %}
CSS, пожалуйста, отредактируйте по мере необходимости для вашей темы.
.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;';
}
}
Из вашего вопроса не совсем понятно, хотите ли вы использовать разные изображения в зависимости от размера экрана/устройства или только миниатюру меньшего размера.