
Адаптивные изображения на сайте при помощи атрибута srcset
picture — это новый элемент, который стал частью HTML5. Он позволит задавать несколько элементов source, каждый из которых будет указывать на различные файлы изображений вместе с условиями, при которых они должны загружаться.
Вот несложный пример, который проверяет, если окно просмотра меньше 768 пикселей, и в случае соответствия загружает изображение меньшего размера:
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg"> <img srcset="default.jpg" alt="My default image">
</picture>
Таким образом мы можем задать набор изображений отдельно для смартфона, отдельно для планшета, отдельно для десктопа.
Сейчас TYPO3 CMS использует рендеринг страниц через fluid_styled_content. Также большой популярностью пользуется расширение - набор viewhelper'ов VHS: Fluid ViewHelpers https://typo3.org/extensions/repository/view/vhs Мы будем использовать его. Далее нужно переопределить темплейты выводящие изображения примерно следующим образом
lib.fluidContent.templateRootPaths.10 = your_path/fluid_styled_content/Templates/
lib.fluidContent.partialRootPaths.10 = your_path/fluid_styled_content/Partials/
lib.fluidContent.layoutRootPaths.10 = your_path/fluid_styled_content/Layouts/
Далее в Partials/MediaGallery.html нужно изменить следующее:
В самом верху шаблона определям пространство имен для View Helper {namespace v=FluidTYPO3\Vhs\ViewHelpers}
В секции media
<f:section name="media">
<f:if condition="{isImage}">
<f:then>
<v:media.picture src="{column.media.publicUrl}" alt="{column.media.alternative}">
<v:media.source media="(min-width: 992px)" width="{column.dimensions.width}c" height="{column.dimensions.height}c" />
<v:media.source media="(min-width: 768px)" width="200c" height="200c" />
<v:media.source width="80c" height="80c" />
</v:media.picture>
</f:then>
<f:else>
<f:media
file="{column.media}"
width="{column.dimensions.width}"
height="{column.dimensions.height}"
alt="{column.media.alternative}"
title="{column.media.title}"
/>
</f:else>
</f:if>
</f:section>
Я обычно использую css фреймворк bootstrap и изменяю шаблон под его "сетку". Но в более простом варианте можно задать набор media queries стилей в вашем css файле.
@media (max-width: 992px) {
.ce-gallery {
width: 100%;
}
}
@media (min-width: 640px) and (max-width: 1200px) {
.ce-gallery .ce-column {
margin: 0;
/* Abstand zwischen Bildern */
padding: 0 5px;
box-sizing: border-box;
}
.ce-gallery .ce-column:first-child {
padding-left: 0;
}
.ce-gallery .ce-column:last-child {
margin-right: 0;
}
/* Fluid Image Tags */
.ce-gallery img,
.ce-gallery picture {
width: 100%;
height: auto;
}
.ce-gallery[data-ce-columns="2"] .ce-column {
width: 50%;
}
.ce-gallery[data-ce-columns="3"] .ce-column {
width: 33%;
}
.ce-gallery[data-ce-columns="4"] .ce-column {
width: 25%;
}
.ce-gallery[data-ce-columns="5"] .ce-column {
width: 20%;
}
}
@media (max-width: 640px) {
.ce-gallery .ce-column {
margin: 0 0 10px;
width: 100%;
box-sizing: border-box;
}
/* Fluid Image Tags */
.ce-gallery img,
.ce-gallery picture {
width: 100%;
height: auto;
}
}
Теперь вы имеете на сайте по настоящему адаптивные изображения.
Источник вдохновения http://blog.teamgeist-medien.de/2016/04/typo3-responsive-images-mit-fluid-styled-content-fsc.html