1. Главная
  2. О Компании
  3. Блог
  4. Адаптивные изображения на сайте при помощи атрибута srcset
Адаптивные изображения на сайте при помощи атрибута srcset

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

Разработка

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

Назад