如何使用FLUX创建类似TYPO3本地图像内容类型的图像选择字段？

Question

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

如果可以，如何实现？

我只能创建一个链接到文件表的带向导的输入字段。这是代码：

<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 一样具有缩略图、文件名等等...

- Benjamin

Answer 1

这个功能已经被添加到了GitHub上的当前流控制器。

您可以像这样使用它：

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

- Benjamin

---

为了让 enabledControls 正常工作，您需要将它们提供为整数。{info: 1, new: 0, dragdrop: 1, ... } - Alex

现在是 <flux:field.inline.fal>。 - yunzen

Answer 2

也许有人需要使用当前版本的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>

在预览中，此操作将执行以下操作：

预览

而在后端插件中，则会执行以下操作：

插件视图

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

- Naderio

Answer 3

这怎么样： 并非真正的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>

- Eumolpius

Answer 4

目前唯一的方法是创建一个新的自定义字段，使用自定义渲染和逻辑。最好使用核心来创建字段。

您可以在flux扩展的源代码中查看该方法。查看类和向导的制作方式。

在4.5.x LTS中也存在DAM支持的类似问题。

- Fedir RYKHTIK

---

是的，你说得对 - FAL 的表结构与 DAM 类似。 但我认为使用 flexform.field.inline（IRRE Records）可以创建类似本地字段的字段。我会等待，也许其他人有解决方案。https://fedext.net/viewhelpers/flux/Flexform/Field/InlineViewHelper.html - Benjamin

找到更简单的解决方案会很棒。 - Fedir RYKHTIK

我会像Benjamin建议的那样，尝试使用flux:flexform.field.inline视图助手来实现我的方式。它应该允许您有足够的控制来创建新的DAM关系记录。 - Claus Due

这里是所需的字段配置： http://wiki.typo3.org/File_Abstraction_Layer#TCA 但是，有一些配置值似乎被Flux遗漏了：

• foreign_match_fields
• foreign_selector_fieldTcaOverride
• filter

我会随时更新我的进展情况.. - Benjamin

@Benjamin 你可以创建一个自定义字段，来添加所需的配置。看一下文件字段是如何定义的，在Flux中，你可以创建一个具有相似属性的媒体字段。如果我没记错的话，只需要两个文件就能实现目标。 - Fedir RYKHTIK

Answer 5

我使用flux 6.0.1创建了一个viewHelper，以便拥有相同的媒体字段。

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

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

- TeddyBear