php typo3 typoscript fluid-styled-content

The contents of my new custom element do not appear in the front end but I can see them in the Database and on debugging

I have created a new custom element using the sitepackage builder, created a new table and built the TCA fields and it seemed to be going well, I could save content in my custom element (title, text, images) and find it in my database but when I try to render the content on the front-end I get nothing, not even an error.

I have the following typoscript in my setup (updated after the answer):


tt_content {
    extention_key =< lib.contentElement
    extention_key {
        templateRootPaths.10 = EXT:extention_key/Resources/Private/Templates/ContentElements/
        partialRootPaths.10 = EXT:extention_key/Resources/Private/Partials/ContentElements/
        templateName = mytemplate

        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
            10 {
                table = tx_extention_key_items
                pidInList.field = pid
                selectFields = tx_extention_key_items.*
                join = tt_content ON tx_extention_key_items.akkordeon_items_content_relation= tt_content.uid
                orderBy = tt_content.sorting
                as = items
                dataProcessing {
                     10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                     10 {
                         references.fieldName = image
                         as = images
                         treatIdAsReference = 1
                     }
                 }
            }
        }
    }
}

tx_extention_key_items.extention_items_content_relation = tt_content.uid is the condition I have set for the records to be passed to the template and I have alreasy checked the DB and confirmed it indeed is working, I also confirmed that pid is correct.

For my template I have this basic loop (also updated):

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true"></html>


<f:if condition="{items}">
    <f:for each="{items}" as="item">
        <div class="item">
            <h2>{item.title}</h2>
            <p>{item.description}</p>
            <f:if condition="{item.images}">
                <f:for each="{item.images}" as="image">
                    <f:image src="{image.uid}" alt="{image.title}" />
                </f:for>
            </f:if>
        </div>
    </f:for>
</f:if>

<f:debug title="My Debug Statement">{items}</f:debug>


<f:render partial="accordion" arguments="{data: tx_extention_key_items}" />

The issue is not being able to see any content, inspecting using the broweser tool shows empty HTML tags, the debug line returns an array of my items, I can see it has the correct pid and the relation field is the same as the element uid from tt_content that should mean that my content is being passed to the template so I have no idea what's not working, especially when I get no error messege despite having config.debug set to 1

How to fix this? EDIT : After making some changes based on the answers I got I now get an error on my page error:file not found

EDIT 2: after following @Markus advice I changed the line : <f:image src="{image.uid}" alt="{image.title}" /> to <f:image image="{image}" alt="{image.title}" /> and that did it for the images but the title and description still missing I also added the following debug line for items and this is the result<f:debug title="Debug items">{item}</f:debug> thanks for all the help so far. debug statement for items

Solution

Be aware of your brackets and indention. 20 is outside of dataProcessing where it won't be processed.

And the FilesProcessor needs to be applied to the result of the DatabaseQueryProcessor to be processed for each of your items separately and based on the current item's data.

tt_content {
    extention_key =< lib.contentElement
    extention_key {
        templateRootPaths.10 = EXT:extention_key/Resources/Private/Templates/ContentElements/
        partialRootPaths.10 = EXT:extention_key/Resources/Private/Partials/ContentElements/
        templateName = mytemplate

        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
            10 {
                table = tx_extention_key_items
                pidInList.field = pid
                selectFields = tx_extention_key_items.*
                join = tt_content ON tx_extention_key_items.extention_items_content_relation = tt_content.uid
                where = txextention_key_items.akkordeon_items_content_relation = tt_content.uid
                orderBy = tt_content.sorting
                as = items
                dataProcessing {
                     10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                     10 {
                         references.fieldName = image
                         as = images
                         treatIdAsReference = 1
                     }
                 }
            }
        }
    }
}

Details can be found at: https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/ContentObjects/Fluidtemplate/DataProcessing/DatabaseQueryProcessor.html#typoscript