TYPO3 extend tt_content with FAL image and display in frontend

i want to extend the tt_content table with an image. It should be possible to set this image in every content element. This is what i got so far

ext_tables.sql

CREATE TABLE tt_content (
   tx_layout_background_image int(11) unsigned DEFAULT '0' NOT NULL,
);

TypoScript:

page.10 = FLUIDTEMPLATE
page.10 {
  templateName = TEXT
  templateName.stdWrap.cObject = CASE
  templateName.stdWrap.cObject {
    key.data = pagelayout
    pagets__kubus_layout = TEXT
    pagets__kubus_layout.value = Default
    default = TEXT
    default.value = Default
  }
  templateRootPaths {
    0 = {$resDir}/Private/Templates/Page/
  }
  partialRootPaths {
    0 = {$resDir}/Private/Partials/Page/
  }
  layoutRootPaths {
    0 = {$resDir}/Private/Layouts/Page/
  }
  dataProcessing {
    20 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
    20 {
      references {
        table = tt_content
        uid.field = uid
        fieldName = tx_layout_background_image
      }
      as = images
    }
  }
}

Overrides/tt_content.php

<?php

$temporaryColumn = array(
    'tx_layout_background_image' => [
        'label' => 'BG Image',
        'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
            'tx_layout_background_image',
            [
                'appearance' => [
                    'createNewRelationLinkTitle' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference'
                ],
                'overrideChildTca' => [
                    'columns' => [
                        'crop' => [
                            'description' => 'field description',
                        ],
                    ],
                    'types' => [
                        \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [
                            'showitem' => '
                               --palette--;;imageoverlayPalette,
                               --palette--;;filePalette'
                        ],
                    ],
                ],
            ],
            $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
        ),
    ],
);

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
    'tt_content',
    $temporaryColumn
);

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
    'tt_content',
    'layout',
    'tx_layout_background_image',
    'after:layout'
);

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
    'tt_content',
    '--div--;Layout,
    --palette--;;layout',
    '',
    ''
);

The Problem is that i just get this in the data array

data.tx_layout_background_image => 1 (integer)

How can i get the image from this? I Tried it with treatasreference but i dont get the right image object.

Edit
With this it seems like its working

lib.contentElement {
    dataProcessing.99 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
    dataProcessing.99 {
        as = backgroundImages
        references.fieldName = tx_layout_background_image
        references.table = tt_content
   }
}

The 1 you have found in the field is the number of references to this field. The real relation is stored in another record.

Since inventing FAL (File Abstraction Layer) references to files are no longer stored as path and name of the file but are represented by a record (sys_file), where the path and name (and further information) is stored. a relation is done with mm-records in the table sys_file_reference. it consists of the fields

• uid_local (the uid of the sys_file-record)
• uid_foreign (the uid of the related record)
• tablenames (name of the table of related record: tt_content in your case)
• fieldname (name of the field in that record as there might be multiple fields with file relations: your field-name: tx_layout_background_image )
• sorting_foreign (giving an order if multiple files could be related)
• table_local (always sys_file)

Now you can make an explicit query on this related records.

But you also can use a dataprocessor which can handle it for you:
As you use files it should be a filesprocessor as you used it in your code.

But you missed the correct context.

Either you have inserted the field to the wrong table (tt_content instead of pages).
Or you used the filesprocessor on the wrong table: the rendering of tt_content records is not done in page.10 but in tt_content.<cType> like:

example:

tt_content.my_custom_ctype = FLUIDTEMPLATE
tt_content.my_custom_ctype {
   :
   dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
   dataProcessing.10 {
      as = backgroundImages
      references.fieldName = tx_layout_background_image
      references.table = tt_content
   }
}

If you wish to add it to every cType you can add it to lib.contentElement the prototype for all content elements from where it gets copied/referenced into all cTypes.

lib.contentElement {
   dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
   dataProcessing.10 {
      as = backgroundImages
      references.fieldName = tx_layout_background_image
      references.table = tt_content
   }
}