如何使用 FLUX 制作类似于 TYPO3 原生图像内容类型的图像选择字段？答案

【问题标题】：How can i make a image selection field with FLUX that is like the TYPO3-native image content type?如何使用 FLUX 制作类似于 TYPO3 原生图像内容类型的图像选择字段？
【发布时间】：2013-11-02 09:33:40
【问题描述】：

是否可以像默认的TYPO3-Image-ContentElement 一样使用Flux/Fluid FlexForms 创建图像选择字段？

如果是，怎么做？

我只能创建一个链接到文件表的input field (with wizard)。这是代码：

<flux:flexform.field.input name="file" eval="trim">
    <flux:flexform.field.wizard.link allowedExtensions="jpg,jpeg,png,gif"/>
</flux:flexform.field.input>

但我希望它像带有缩略图、文件名等的 TYPO3-Image-ContentElement。

【问题讨论】：

标签： typo3 fluid typo3-6.1.x flux fedext

【解决方案1】：

目前唯一的一种方法 - 使用自定义呈现和逻辑创建一个新的自定义字段。最好使用 Core 创建字段。

您可以查看flux 扩展源中的方法。检查类和向导是如何制作的。

对于 DAM 支持，4.5.x LTS 也存在类似问题。

【讨论】：

是的，你是对的——FAL 的表结构类似于 DAM。但我认为可以使用 flexform.field.inline (IRRE Records) 创建一个类似原生的字段。我会等，也许其他人有解决方案..fedext.net/viewhelpers/flux/Flexform/Field/…
找到更简单的解决方案会很棒。
我希望 - 就像 Benjamin 建议的那样 - 尝试使用 flux:flexform.field.inline ViewHelper。它应该允许您有足够的控制权来创建新的 DAM 关系记录。
这里是需要的字段配置：wiki.typo3.org/File_Abstraction_Layer#TCA 但是有一些配置值flux似乎丢失了：-foreign_match_fields-foreign_selector_fieldTcaOverride-过滤器我会根据我的进度更新这个问题..
@Benjamin 您可以创建一个自定义字段，这将添加您需要的配置。看看 File 字段是如何定义的，你可以创建一个具有类似属性的 Media 字段。如果我没记错的话，只需要 2 个文件即可实现目标。

【解决方案2】：

此功能已添加到github 上的当前通量主控器中。

你可以这样使用它：

<flux:flexform.field.inline.fal name="myimage"
     multiple="TRUE" maxItems="5"
     enabledControls="{info:1,new:1,dragdrop:1,sort:1,hide:1}"/>

【讨论】：

为了使 enabledControls 工作，您必须将它们作为整数提供。 {信息：1，新：0，拖放：1，...}
现在是<flux:field.inline.fal>。

【解决方案3】：

我用 Flux 6.0.1 做了一个 viewHelper 来拥有相同的媒体字段。

但是我测试了 github 和我的版本，我们遇到了同样的问题：复制/粘贴具有此类字段的内容不会复制媒体。 sys_file 表中的记录不会被复制。

我认为typo3团队也有同样的问题，这就是为什么他们不在“文本图像”和“图像”内容中使用这种类型的字段

【讨论】：

【解决方案4】：

这个怎么样：不是真正的 FAL 支持，但它可以工作并且不显示文件编号。取决于上传文件夹。

<flux:flexform.sheet name="slider" label="Slider Bilder - Startseite">
  <flux:flexform.section name="sliderImagges">
    <flux:flexform.object name="image" >
      <flux:flexform.field.input name="linkTitle" label="Titel" /> 
        <flux:flexform.field.file name="image" label="Bild"
      uploadFolder="uploads/pics/"
      validate="trim" size="1" showThumbs="1"
      internalType="file" allowed="jpg,png,gif" />
        <flux:flexform.field.input name="url" label="Ziel des Links">
    <flux:flexform.field.wizard.link activeTab="page" />
      </flux:flexform.field.input>
    </flux:flexform.object>
  </flux:flexform.section>
</flux:flexform.sheet>

【讨论】：

【解决方案5】：

也许有人想要使用当前版本的 Flux (7.4.0) 的解决方案：

制作后端字段：

<flux:field.inline.fal name="bild" showThumbs="true" allowedExtensions="'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg'" maxItems="1" required="true" />

调用图像：

{v:content.resources.fal(field: 'bild') -> v:iterator.first() -> v:variable.set(name: 'bild')}
    <f:image treatIdAsReference="1" src="{bild.id}" title="{bild.title}" alt="{bild.alternative}" maxWidth="80" maxHeight="50" crop="{bild.crop}"/>

我的内容元素的完整代码：

<f:layout name="Content"/>

<f:section name="Configuration">
    <flux:form id="footerbild" options="{group: 'FeWo-Seiteninhalte'}">

        <flux:field.inline.fal name="bild" showThumbs="true" allowedExtensions="'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg'" maxItems="1" required="true" />

    </flux:form>
</f:section>

<f:section name="Preview">

    {v:content.resources.fal(field: 'bild') -> v:iterator.first() -> v:variable.set(name: 'bild')}
    <f:image treatIdAsReference="1" src="{bild.id}" title="{bild.title}" alt="{bild.alternative}" maxWidth="80" maxHeight="50" crop="{bild.crop}"/>

</f:section>


<f:section name="Main">

    {v:content.resources.fal(field: 'bild') -> v:iterator.first() -> v:variable.set(name: 'bild')}
    <f:image class="img-responsive" treatIdAsReference="1" src="{bild.id}" title="{bild.title}" alt="{bild.alternative}" crop="{bild.crop}"/>

</f:section>

这在预览中执行以下操作：

preview

这在后端插件中：

Plugin-view

支持图片上传、图片裁剪等内置编辑器。

【讨论】：