Posts.html

<f:layout name="Default" />
<f:section name="Body">
    <f:for each="{posts}" as="post">
        <div class="post bg-white rounded-md shadow-sm mb-4 p-4 grid grid-cols-6 gap-4" id="post-{post.data.uid}">
            <div>
                <div class="flex items-center flex-col border p-4 rounded-lg">
                    <span class="text-2xl">
                        <f:format.date date="@{post.data.published_from}" format="d.m.Y" />
                    </span>
                </div>
            </div>

            <div class="col-span-5 flex flex-col justify-center">
                <h2 class="font-light">{post.data.header}</h2>

                <f:if condition="{post.data.bodytext}">
                    <div class="mt-4">
                        {post.data.bodytext -> f:format.raw()}
                    </div>
                </f:if>
            </div>
        </div>
    </f:for>
</f:section>

setup.typoscript

tt_content.posts >
tt_content.posts =< lib.contentElement
tt_content.posts {
    templateName = Posts

    dataProcessing {
        10 = database-query
        10 {
            table = tx_basiswebcontentposts_post
            orderBy = published_from
            pidInList.data = site : rootPageId
            join {
                data = field:selected_categories
                wrap = {#sys_category_record_mm} ON uid = {#sys_category_record_mm}.{#uid_foreign} AND {#sys_category_record_mm}.{#tablenames} = "tx_basiswebcontentposts_post" AND {#sys_category_record_mm}.{#uid_local} IN(|)
                fieldRequired = selected_categories
            }
            as = posts
            dataProcessing {
                10 = files
                10 {
                    references.fieldName = image
                    as = images
                }
            }
        }
    }
}