How can i make a image selection field with FLUX that is like the TYPO3-native image content type?

Question

Is it possible to create a image selection field with Flux/Fluid FlexForms like the default TYPO3-Image-ContentElement?

And if yes, how?

I could only create a input field (with wizard) that links to the files table. This is the code:

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

But i want it like the TYPO3-Image-ContentElement with thumbnail, filename etc..

Answer 1

This feature has been added to the current flux master on github.

You can use it like this:

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

Answer 2

Maybe someone wants the solution with the current version of flux (7.4.0):

Make the Backend-Field:

<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" />

Call the Image:

{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}"/>

Full code for my content-element:

<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>

This does the following in preview:

preview

And this in backend plugin:

Plugin-view

It supports Image-Upload, image-crop with the built-in editor etc.

Answer 3

The only one way at the moment - to create a new custom field with custom rendering and logic. It's preferable to use the Core to create fields.

You could check the method in the sources of flux extension. Check how classes and wizards are made.

There is similar problem on 4.5.x LTS for DAM support.

Answer 4

I did a viewHelper with flux 6.0.1 to have the same media field.

But i test the version from github and mine and we have the same problem : the copy/paste of a content with this type of field don't copy the media. The record from the table sys_file is not copied.

I think typo3 team have the same problem and it's why they don't use this type of field in the "text image" and "image" contents

Answer 5

How about this: Not really FAL support but it works and no file numbers are shown. Depends on the upload-Folder.

<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>