TYPO3 Сделать страницу Ressource Image отзывчивым - PullRequest
Новая
       2

TYPO3 Сделать страницу Ressource Image отзывчивым

0 голосов
/ 29 октября 2019

У меня есть веб-сайт TYPO3, и я загружаю изображение героя со страницы Ressource Media. В Бэкэнде у меня есть три варианта Cropvariants (рабочий стол, планшет, мобильный телефон). Обрезанные изображения сохраняются и обрабатываются, поэтому я могу найти их в обработанной папке. Моя проблема в том, что я не могу найти способ отобразить изображения, основанные на моих трех кадрах, в качестве адаптивного изображения. Поэтому, если посетитель находится на мобильном телефоне, он должен отображать мобильные кадрирования и т. Д.

Я пытался добавить свойство "layoutKey = picture" в объект IMAGE, но это не сработало. Я также не нашел ничего в сети.

Это код в TCEFORM.typoscript, и он создает варианты обрезки в Backend. 

TCEFORM.sys_file_reference.crop.config.cropVariants {

        desktop {
            title = Desktop
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                16:9 {
                title = 16:9
                value = 1.7777777777777777
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
        tablet {
            title = Tablet
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                16:9 {
                title = 16:9
                value = 1.7777777777777777
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
        mobile {
            title = Mobil
            selectedRatio = 1:1
            allowedAspectRatios {
                1:1 {
                title = 1:1
                value = 1.0
                }

                4:3 {
                title = 4:3
                value = 1.3333333333333333
                }

                NaN {
                title = Frei
                value = 0.0
                }
            }
        }
    }

Чтобы загрузить изображение в заголовок.html Частично Я использую следующий ViewHelper: 

<f:cObject typoscriptObjectPath="lib.headerImage" />

, который загружает объект lib.headerImage: 

lib.headerImage = IMAGE
lib.headerImage {
  file {
    import.data = levelmedia:-1, slide
    treatIdAsReference = 1
    import.listNum = 0
  }
}

Мне нужен способ с помощью Typoscript или Viewhelpers для создания HTML srcsetпоэтому браузер отображает правильный вариант кадрирования в соответствии с устройством пользователя.

1 Ответ

0 голосов
/ 30 октября 2019

когда вы используете liquid_styled_content, попробуйте переопределить частичное изображение web / typo3 / sysext / liquid_styled_content / Resources / Private / Partials / Media / Rendering / Image.html внутри переменных шаблона, вы можете создать свой собственный образ с помощью наборов src.

...