Адаптивные изображения на сайте при помощи атрибута srcset

05.06.2017 | Разработка | автор: Дмитрий Васильев

Все современные браузеры поддерживают специальный атрибут для изображений, который называется srcset. Атрибут 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

comments powered by HyperComments