How can I display multiple images in frontend with Fluid in TYPO3?

Question

I want to display two pictures in the frontend with Fluid.

I tried these:

1. Add a Model "MultipleImages.php":

<?php
        /**
         * carouselStartseiteMultipleImages
         *
         * @var \TYPO3\CMS\Extbase\Persistence\ObjectStorage<\TYPO3\CMS\Extbase\Domain\Model\FileReference>
         * @lazy
         */
        protected $carouselStartseiteMultipleImages = NULL;

        /**
         * Constructor
         *
         * @return AbstractObject
         */
        public function __construct() {
                // ObjectStorage is needed to reference multiple files to one field
                // see also @var before variable and @return before the respective get() method
                $this->carouselStartseiteMultipleImages = new \TYPO3\CMS\Extbase\Persistence\ObjectStorage();
        }

        /**
         * returns carouselStartseiteMultipleImages
         *
         * @return \TYPO3\CMS\Extbase\Persistence\ObjectStorage
         */
        public function getcarouselStartseiteMultipleImages() {
                return $this->carouselStartseiteMultipleImages;
        }

        /**
         * sets carouselStartseiteMultipleImages
         *
         * @param \TYPO3\CMS\Extbase\Persistence\ObjectStorage $carouselStartseiteMultipleImages
         * @return void
         */
        public function setcarouselStartseiteMultipleImages($carouselStartseiteMultipleImages) {
                $this->carouselStartseiteMultipleImages = $carouselStartseiteMultipleImages;
        }
?>

2. Add a filed in TCA:

'tx_carousel_startseite_angebote_image' => array(
            'exclude' => 1,
            'label' => 'Image für Klassen- & Gruppenreisen (links)',
            'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
                    'carouselStartseiteMultipleImages',
                    array('minitems'=>0,'maxitems'=>2),
                    $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
                ),
        ),

I want to add two pictures:

A table for my child item names tx_carousel_startseite_angebote_item. A fild name for the image is tx_carousel_startseite_angebote_image.

In my HTML-file:

<f:for each="{https://mydomain/.tx_carousel_startseite_angebote_image}" as="pic">
    <f:image src="{pic.originalResource.publicUrl}" alt="{pic.originalResource.alternative}" title="{pic.originalResource.title}" ></f:image>
    {pic.originalResource.description}
</f:for>

But my images don't be displayed in the frontend and there ist an error:

Oops, an error occurred! Code: 202207040952376ac3ea67

I'd also tried to write this fluid in the html-file:

<f:for each="{item.data.tx_carousel_startseite_angebote_image.0}" as="pic1">
    <f:image src="pic1" class="carousel-startseite-angebote-image" height="580" width="600" alt="{pic1.properties.alt}" title="{pic1.properties.title}" />
</f:for>

Then there is no error, but the image doesn't show up.

My debug is so:

In the "item > data" there are data:

But I can't display my pictures. How can I display multiple images in the frontend? Thank you for your help.

Adding: I added two typoscripts and in my typoscript now:

tt_content.carousel_startseite_angebote >
tt_content.carousel_startseite_angebote =< lib.contentElement
tt_content.carousel_startseite_angebote {
    
    templateName = CarouselStartseiteAngebote
    templateRootPaths.150 = EXT:myExtentionkey/Resources/Private/Templates/ContentElements/
    partialRootPaths.150 = EXT:myExtentionkey/Resources/Private/Partials/ContentElements/
    layoutRootPaths.150 = EXT:myExtentionkey/Resources/Private/Layouts/ContentElements/

    dataProcessing {        
        15 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        15 {
            as = images
            references.fieldName = tx_carousel_startseite_angebote_image
            references.table = tx_carousel_startseite_angebote_item
            sorting = title
            sorting.direction = descending
        }        
        
        20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
        20 {
            table = tx_carousel_startseite_angebote_item
            pidInList.field = pid
            where {
                data = field:uid
                intval = 1
                wrap = tt_content=|
            }
            orderBy = sorting
            dataProcessing {
                10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                10 {
                    references.fieldName = background_image
                    as = backgroundImage
                }
                20 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                20 {
                    references {
                        table = tx_carousel_startseite_angebote_item
                        fieldName = tx_carousel_startseite_angebote_image
                    }
                    as = csaMultipleImages
                }

My debug now:

There are no data...

Answer 1

Your image field just holds the count of images, so its not possible to access and display it directly. Instead you should add a FileProcessor in your typoscript rendering definition to resolve the relations to your files.

For a custom content element it could look like this:

tt_content {
   examples_dataprocfiles =< lib.contentElement
   examples_dataprocfiles {
      templateName = DataProcFiles
      dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
      dataProcessing.10 {
         as = images
         references.fieldName = image
         references.table = tt_content
         sorting = title
         sorting.direction = descending
      }
   }
}

Fluid output is then handled like this:

<f:for each="{images}" as="image">
     <f:image image="{image}" height="250"/>
</f:for>

See docs and more detailed example here: https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/ContentObjects/Fluidtemplate/DataProcessing/FilesProcessor.html#typoscript