如何在Typo3中使用流体显示多个图像？

Question

我想用流体在前端显示两张图片。

我尝试了以下内容：

1. 添加一个模型“ totromimages.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. 添加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']
                ),
        ),

我想添加两张图片：

我的子项目名称的表格 tx_carousel_startseite_angebote_item 。图像的fild名称为 tx_carousel_startseite_angebote_image 。

在我的html文件中：

<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>

但是我的图像没有在前端显示，并且存在错误：

Oops, an error occurred! Code: 202207040952376ac3ea67

我还试图在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>

然后没有错误，但是图像没有出现。

我的调试是如此：

”项目中有数据：

，但我无法显示我的图片。如何在前端显示多个图像？感谢您的帮助。

添加： 我现在添加了两个错字，现在在我的错字中：

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
                }

我现在调试：

没有数据...

Answer 1

您的图像字段只有图像的数量，因此无法直接访问和显示。取而代之的是，您应该在错别字渲染定义中添加文件processor，以解决与文件的关系。

对于一个自定义内容元素，它看起来像这样：

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
      }
   }
}

流体输出会像这样处理：

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

请参见文档和更详细的示例： https://docs.typo3.org/m/typo3/reference-reference-typoscript/11.5/en-us/contentobjects/contentobjects/fluidtemplate/dataprocessing/filesprocessing/filesprocessor.html#typoscript