Search code examples
typo3fluxfluidtypo3-10.x

Flux Field Inline Fal mit CropVariants


Iam currently updating a TYPO3 Project with Flux to TYPO3 10 and now i want to migrate all fields to FieldViewhelper.

Mostly all Fields war pretty well but the Inline Fal elements with CropVariants are kinda tricky. I dont know how to implement this correctly inside the config option.

My Field currently look like this:

{f:variable(name: '_allowedFileExtensions', value: '{allowedFileExtensions}')}
{f:variable(name: '_disallowedFileExtensions', value: '{disallowedFileExtensions}')}
<f:variable name="config" value="{
    type: 'inline',
    foreign_table: 'sys_file_reference',
    foreign_field: 'uid_foreign',
    foreign_sortby: 'sorting_foreign',
    foreign_table_field: 'tablenames',
    foreign_match_fields: {
        fieldname: name
    },
    foreign_label: 'uid_local',
    foreign_selector: 'uid_local',
    maxitems: maxitems,
    minitems: minitems,
    multiple: multiple,
    overrideChildTca: {
        columns: {
            uid_local: {
                config: {
                    appearance: {
                        elementBrowserType: 'file',
                        elementBrowserAllowed: _allowedFileExtensions
                    }
                }
            }
        },
        types: {
            0: {
                showitem: '--palette--;;imageoverlayPalette, --palette--;;filePalette'
            },
            1: {
                showitem: '--palette--;;imageoverlayPalette, --palette--;;filePalette'
            },
            2: {
                showitem: '--palette--;;imageoverlayPalette, --palette--;;filePalette'
            },
            3: {
                showitem: '--palette--;;audioOverlayPalette, --palette--;;filePalette'
            },
            4: {
                showitem: '--palette--;;videoOverlayPalette, --palette--;;filePalette'
            },
            5: {
                showitem: '--palette--;;imageoverlayPalette, --palette--;;filePalette'
            }
        }
    },
    filter: {
        0: {
            userFunc: 'TYPO3\\CMS\\Core\\Resource\\Filter\\FileExtensionFilter->filterInlineChildren',
            parameters: {
                allowedFileExtensions: _allowedFileExtensions,
                disallowedFileExtensions: _disallowedFileExtensions
            }
        }
    },
    appearance: {
        useSortable: 1,
        headerThumbnail: {
            field: 'uid_local',
            width: '45',
            height: '45c'
        },
        showPossibleLocalizationRecords: 0,
        showRemovedLocalizationRecords: 0,
        showSynchronizationLink: 0,
        showAllLocalizationLink: 0,
        enabledControls: {
            info: 1,
            new: 0,
            dragdrop: 1,
            sort: 0,
            hide: 1,
            delete: 1,
            localize: 1
        }
    }
}" />
<flux:field type="inline" name="{name}" label="{label}" config="{config}" exclude="0"/>

Theoretical i could do something like this; Thats the way i would do it in TCA Area belowoverrideChildTca:

['columns']['crop']['config'] =>
'cropVariants' => [
  'heroimage' => [
     'title' => 'Hero Image',
     'allowedAspectRatios' => [
       '1504x846' => [
          'title' => '1504:846',
          'value' => 1504 / 846
        ],
     ],
  ],
],

I cant get it to work? Has somebody any ideas oder examples how to configure this correctly? Thank You!


Solution

  • I found the correct writing for adding a crop variant for this example. If you add this part into overrideChildTca -> columns -> crop -> config then it should work :)

        overrideChildTca: {
            columns: {
                crop: {
                    config: {
                        type: 'imageManipulation',
                        cropVariants: {
                            tablet: {
                                title: 'Tablet',
                                allowedAspectRatios: {
                                    NaN: {
                                        title: 'Free',
                                        value: 0.0
                                    },
                                    '21-9': {
                                        title: '21:9',
                                        value: 2.3333333
                                    }
                                }
                            }
                        }
                    }
                }
            },