我该如何在打字稿中实现流畅性

Question

我目前正在尝试实现一种使图像响应的方法。现在，对于不同的屏幕尺寸，我在TYPO3图像工具中具有不同的作物变量。问题是我不能使用流体，因为模板是如何完成的。因此，现在我正在寻找一种将流畅的代码传输到Typoscript的方法，但遗憾的是，我对Typoscript的经验不是很丰富。

这是我的可变代码：

<f:for each="{images}" as="image">
<picture>
    <source srcset="{f:uri.image(image: image, maxWidth: settings.maxImgWidth, cropVariant: 'default')}" media="(min-width: 1200px)">
    <source srcset="{f:uri.image(image: image, maxWidth: '992', cropVariant: 'default')}, {f:uri.image(image: image, maxWidth: '1984', cropVariant: 'default')} 2x" media="(min-width: 992px)">
    <source srcset="{f:uri.image(image: image, maxWidth: '768', cropVariant: 'tablet')}, {f:uri.image(image: image, maxWidth: '1536', cropVariant: 'tablet')} 2x" media="(min-width: 768px)">
    <source srcset="{f:uri.image(image: image, maxWidth: '768', cropVariant: 'mobile')}, {f:uri.image(image: image, maxWidth: '1536', cropVariant: 'mobile')} 2x" media="(max-width: 767px)">
    <!---Fallback--->
    <img class="img-responsive" src="{f:uri.image(image: image, maxWidth: settings.maxImgWidth, cropVariant: 'default')}" alt="{image.alternative}" longdesc="{image.description}" title="{image.title}">
</picture>

我将不胜感激。

Answer 1

您总是可以在打字稿中使用FLUIDTEMPLATE对象，但这意味着您必须提供流体中使用的所有必要数据作为变量。甚至可以为其他FLUID模板定义变量。

但是您可能正在寻找以纯打字本实现与FLUID相同的功能。这是可能的，因为它是在FLUID之前使用的（并且没有标记模板）。

只需构建一个COA并在所有地方使用换行。

您的外部结构是f:for循环，它循环访问某些文件。现在，您需要在打字稿中添加此循环。可能是数据处理器或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
    }
  }
}