typo3 - 打字稿代码的滑动图像问题

问题描述

我有这样的页面结构（Typo3 v10）：

Page 1
- Page 1.1
- Page 1.2
- - Page 1.2.1
...
Page 2
- Page 2.1
- Page 2.2
...

我需要显示具有滑动功能的图像（来自页面资源）。所以我使用这段代码：

lib.banner = FILES
lib.banner {
    references {
        table = pages
        data = levelmedia: -1, slide
    }
    renderObj = IMAGE
    renderObj {
        file.import.data = file:current:uid
        file.treatIdAsReference = 1
        wrap = <div class="banner">|</div>
    }
}

在 HTML 模板中，我按如下方式使用它：

<f:cObject typoscriptObjectPath="lib.banner" />

一切都很好。我从当前页面资源或当前页面的父资源中看到图像。

现在，如果我需要使用特殊 id 显示来自其他页面的图像，我使用以下代码

lib.banner = FILES
lib.banner {
    references {
        table = pages
        uid.data = field:PageIdParam
        fieldName = media
    }
    renderObj = IMAGE
    renderObj {
        file.import.data = file:current:uid
        file.treatIdAsReference = 1
        wrap = <div class="banner">|</div>
    }
}

在 HTML 中：

<f:cObject typoscriptObjectPath="lib.banner" data="{ PageIdParam: 123 } />

但是如果我需要添加滑动功能怎么办？

我尝试使用以下代码：

lib.banner = FILES
lib.banner {
    references {
        table = pages
        data = levelmedia: -1, slide
        uid.data = field:PageIdParam
        fieldName = media
    }
    renderObj = IMAGE
    renderObj {
        file.import.data = file:current:uid
        file.treatIdAsReference = 1
        wrap = <div class="banner">|</div>
    }
}

不幸的是它停止工作..我做错了什么？

我也尝试过使用 file.import.data = levelmedia:-1, slide，但没有帮助

更新：

更详细的信息，解释为什么我需要这个：

我创建了一个自定义内容元素（根据https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/ContentElements/AddingYourOwnContentElements.html）

该元素输出图像列表。图片取自页面。

内容元素的排版：

tt_content {
    images_from_pages =< lib.contentElement
    images_from_pages {
        templateName = ImagesFromPages
        dataProcessing {
            30 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            30 {
                special = list
                special.value.field = pages
                maxItems = 100
                as = contentElementPages
                titleField = nav_title // title

                dataProcessing {
                    10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                    10 {
                        references.fieldName = media
                    }
                }
            }
        }
    }
}

为了输出图像，我使用了流体模板：

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

<f:if condition="{contentElementPages}">
    <f:for each="{contentElementPages}" as="page">
        <h2>{page.title}</h2>
        <f:if condition="{page.files.0} ">
            <f:then>
                <f:render partial="ImagesFromPages/Image" arguments="{file: page.files.0}" />
            </f:then>
            <f:else>
                <f:cObject
                    typoscriptObjectPath="lib.banner"
                    data="{
                        parentPageId: page.data.pid,
                        width: '300c',
                        height: '300c'
                    }"
                />
            </f:else>
        </f:if>
    </f:for>
</f:if>

</html>

因此，我有一个列表 [page1 title / img1, page2 title / img2 ...]

如果循环中的页面没有图像，我使用page.data.pid引用“父页面”

我还没有解决的问题：如果父页面也没有图像，我需要递归（滑动）输出父的父图像。

我知道，我可以使用“默认图片或来自根页面的图片”，但首先我想尝试从“父页面的父页面”获取图片

标签： typo3typoscriptfluid

解决方案

使用 Fluid 模板中硬编码的值而不是直接在 TypoScript 中使用的原因是什么？如果需要，可以使用所选页面的 TS 轻松覆盖，例如在 ext-ts 中：（lib.banner.references.uid = 789其中123和789是所需页面的 uid，应该从中获取媒体的字段图像）：

经过测试和工作的示例（实际上它与您的第一个版本相同，只是）：

lib.banner {
    references {
        table = pages
        uid = 123
        fieldName = media
    }
    renderObj = IMAGE
    renderObj {
        file.import.data = file:current:uid
        file.treatIdAsReference = 1
        wrap = <div class="banner">|</div>
    }
}

对于滑动问题

请记住，它slide放置在相对的父子上下文中，将静态uid与幻灯片结合起来可能会产生奇怪的结果。

通常slide只接受两个值it-1和2，并且都指页树的遍历。

此示例按预期工作，它将使用当前页面的媒体，如果不存在，则将遍历树直到根查找它们。

注意：由于levelmedia已经指向media字段，不需要fieldName再次使用，其余代码保持不变

references {
    table = pages
    data = levelmedia: -1, slide
}

上次编辑

您对问题的更新完全改变了事情，现在在我看来，您想显示您在 CE 中选择的第一页中的图像。这不是 TS 的工作slide，相反，您应该使用自定义 PHP 来检查这些页面并从包含任何图像的第一个页面中选择图像。下面是执行此操作的 FE 插件的示例代码，请注意，这只是一个 POC，可能需要修复。如果这是您想要的，我可以在 Github 上发布完整的扩展，以便您进行测试。

插件的作用：

public function listAction()
{

    /** @var FileRepository $fileRepo */
    $fileRepo = GeneralUtility::makeInstance(FileRepository::class);
    $fileObjects = [];

    $pidList = $this->configurationManager->getConfiguration(
        ConfigurationManagerInterface::CONFIGURATION_TYPE_FRAMEWORK
    )['persistence']['storagePid'];

    $pids = GeneralUtility::trimExplode(',', $pidList, true);

    $mediaFound = false;
    foreach ($pids as $pid) {
        if ($mediaFound) continue;
        $fileObjects = $fileRepo->findByRelation('pages', 'media', $pid);
        if (count($fileObjects) > 0) {
            $mediaFound = true;
        }
    }

    $this->view->assign('files', $fileObjects);

}

行动观

<f:for each="{files}" as="file">
    <f:image src="{file.uid}" treatIdAsReference="1"/>
</f:for>

typo3 - 打字稿代码的滑动图像问题

问题描述

解决方案

上次编辑

推荐阅读