Как я могу реализовать жидкость в Typoscript - PullRequest
Новая
       37

Как я могу реализовать жидкость в Typoscript

0 голосов
/ 27 апреля 2020

В настоящее время я пытаюсь реализовать способ сделать изображения отзывчивыми. Прямо сейчас у меня есть различные варианты обрезки в инструменте изображения TYPO3 для разных размеров экрана. Проблема в том, что я не могу использовать жидкость из-за того, как сделан шаблон. Поэтому сейчас я ищу способ перенести текучий код в Typoscript, но, к сожалению, я не очень разбираюсь в Typoscript.

Это мой код жидкости:

image

Буду признателен за любой совет.

1 Ответ

0 голосов
/ 27 апреля 2020

Вы всегда можете использовать объект FLUIDTEMPLATE в Typoscript, но это означает, что вы должны предоставить все необходимые данные, используемые в жидкости в качестве переменных. Это даже возможно для определения переменных для других шаблонов FLUID.

Но вы, вероятно, ищете реализацию того же, что и во FLUID, в чистом опечатке.
Это возможно, так как он использовался до FLUID (и без шаблоны маркеров).

Просто создайте COA и везде используйте обертки.

Ваша внешняя структура - f:for l oop, которая перебирает некоторые файлы.
Теперь вы нужно это l oop в опечатке. Это может быть процессор данных или объект FILES.

некоторые источники вдохновения (не проверено): 

temp.test = FILES 
temp.test { 
  references { 
    table = pages 
    uid.data = current:uid
    fieldName = media
  } 
  renderObj = COA
  renderObj {
    wrap = <picture>|</picture>
    10 = IMGRESOURCE
    10 {
      wrap = <source srcset="|" media="(min-width: 1200px)">
      file { 
        import.data = file:current:uid 
        treatIdAsReference = 1 
        maxWidth < plugin.....settings.maxImgWidth
        cropVariant = default
      } 
    }
    20 = COA
    20 {
      noTrimWrap = |<source srcset="| 2x" media="(min-width: 992px)">|
    }
    20.10 < .10
    20.10.file.width = 992m
    20.10.wrap = |,
    20.20 < .10
    20.20.file.width = 1984m

    30 < .20
    30 {
      noTrimWrap = |<source srcset="| 2x" media="(min-width: 768px)">|
      10.file {
        cropVariant = tablet
        width = 768m
      }
      20.file {
        cropVariant = tablet
        width = 1536m
      }
    }
    40 < .30
    40 {
      noTrimWrap = |<source srcset="| 2x" media="(max-width: 768px)">|
      10.file.cropVariant = mobile
      20.file.cropVariant = mobile
    }
    // fallback
    50 = IMAGE
    50 {
      file { 
        import.data = file:current:uid 
        treatIdAsReference = 1 
        cropVariant = default
        width < plugin.......settings.maxImgWidth 
      }
      class = img-responsive
      altText.data = file:current:alternative
      titleText.data = file:current:title
    }
  }
}
...