1. Главная
  2. О Компании
  3. Блог
  4. Адаптивные изображения для TYPO3 v.9-10
Адаптивные изображения для TYPO3 v.9-10

Адаптивные изображения для TYPO3 v.9-10

Блог Fluid Разработка

Когда-то я уже писал о том что такое адаптивные изображения для сайта и как их реализовывать при помощи TYPO3.

Когда-то я уже писал о том что такое адаптивные изображения для сайта и как их реализовывать при помощи TYPO3.

t3dev.ru/o-kompanii/blog/adaptivnye-izobrazhenija-na-saite-pri-pomoshchi-atributa-srcset

В новых версиях системы это немного изменилось и вместе с тем упростилось.

1. Подклчючаем свой рендеринг fluid_styled_content при помощи следующего TypoScript кода

 

lib.contentElement {
    templateRootPaths {
        200 = EXT:tmpl/Resources/Private/Content/Templates/
    }
    partialRootPaths {
        200 = EXT:tmpl/Resources/Private/Content/Partials/
    }
    layoutRootPaths {
        200 = EXT:tmpl/Resources/Private/Content/Layouts/
    }
}

 

2. Меняем содержимое стандартного файла Resources/Private/Content/Partials/Media/Rendering/Image.html на следующий

 



<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:media class="image-embed-item lazy"
         file="{file}"
         width="{dimensions.width}"
         height="{dimensions.height}"
         alt="{file.alternative}"
         title="{file.title}"
         loading="{settings.media.lazyLoading}"
         additionalAttributes="{srcset: '{f:uri.image(image: file, maxWidth: 768)} 768w,
                {f:uri.image(image: file, maxWidth: 990)} 990w,
                {f:uri.image(image: file, maxWidth: 1200)} 1200w,
                {f:uri.image(image: file, maxWidth: 1440)} 1440w,
                {f:uri.image(image: file, maxWidth: 1900)} 1900w',
                sizes: '(min-width: 1200px) 50vw, 100vw'}"
        />
</html>

 

Готово

Назад