如何在 TYPO3 流体模板中显示图像阵列中的随机图像？答案

【问题标题】：How to show a random image from image array in TYPO3 Fluid Template?如何在 TYPO3 流体模板中显示图像阵列中的随机图像？
【发布时间】：2020-11-30 06:12:07
【问题描述】：

我有一个带有图像对象数组的字段图像。

用户可以在该字段上传一些图片。

在流体模板中它看起来像：

<f:if condition="{field.image}">
    <f:then>
        <f:for each="{field.image}" as="image" iteration="iterator">
            <f:image src="file:{image.properties.uid}" alt="" class="img-fluid" width="1250c" height="600c" />
        </f:for>
    </f:then>
</f:if>

如果上传了三张图片，则全部显示。但我只需要在这个地方展示一张随机图片。我该怎么做？

【问题讨论】：

{field.image} 是一个集合（如果我没记错的话是数组）。创建自定义 ViewHelper 以随机选择一张图像。 VH的逻辑应该比较简单。
请注意，使用自定义 ViewHelper 的方法将被缓存，因此它将显示相同的图像，直到他下一次缓存清除。无论如何，您都可以创建一个 ViewHelper ，它将返回即。可能的图像数组作为 JSON 对象，因此您将能够在不清除缓存的情况下随机选择其中一个。
也许这有帮助：typo3-probleme.de/2019/09/12/…

标签： random typo3 fluid

【解决方案1】：

感谢 cmets 和答案，但由于缓存，此解决方案不适合我的情况。

jQuery 解决方案也不适合我，因为应该先加载所有图片。可以有 10 张 200 kb 的背景图片，而不是仅加载 200 kb，而是加载 2 mb 以仅显示一张图片。也可能是浏览器缓存有问题。

我找到了另一个没有自己的 ViewHelper、jQuery 和缓存问题的解决方案。

这里是：

<f:if condition="{field.image}">
    <f:then>
        {f:count(subject: field.image) -> f:variable(name: 'maximage')}
        {v:random.number(minimum: 1, maximum: maximage) -> f:variable(name: 'randomimage')}
        <f:for each="{field.image}" as="image" iteration="iterator">
            <f:if condition="{iterator.cycle} == {randomimage}">
                <f:image src="file:{image.properties.uid}" alt="" class="img-fluid" width="1250c" height="600c" />
            </f:if>
        </f:for>
    </f:then>
</f:if>

说明：

{f:count(subject: field.image) -> f:variable(name: 'maximage')} - 获取图像集合的大小并将其放入新变量maximage .

{v:random.number(minimum: 1, maximum: maximage) -> f:variable(name: 'randomimage')} - 获取1到maximage之间的随机数，放入新变量随机图像。

- 启动 field.images 的正常循环

- 显示图像的条件 - 仅当当前迭代器 {iterator.cycle} 等于 {randomimage} 时才显示它。

已在 Typo3 8.7.20 中测试。希望这也适用于 Typo3 9.x 和 10.x。

【讨论】：

【解决方案2】：

我提出了一个有几个好处的解决方案：

使用缓存
所有图片都完全响应
只加载一张图片

我生成所有标签，但将它们包装在 HTML 注释中。浏览器不加载图片。

<div class="stage-image has-content">
    <div class="stage-image-item">
        <!-- <img src="/storage/hochschule/upload/150902-4654.jpg" srcset="/storage/_processed_/3/e/csm_150902-4654_8eaf6a0880.jpg 764w,/storage/_processed_/3/e/csm_150902-4654_d0f788b245.jpg 1084w,/storage/hochschule/upload/150902-4654.jpg 1170w,"  sizes="(max-width: 767px) 764px, (min-width: 768px) and (max-width: 991px) 1084px, (min-width: 992px) 1170px"  alt="" > -->
    </div>
    <div class="stage-image-item">
        <!-- <img src="/storage/hochschule/upload/151022-0041.jpg" srcset="/storage/_processed_/f/e/csm_151022-0041_d0b564fdb1.jpg 764w,/storage/_processed_/f/e/csm_151022-0041_b993bf6066.jpg 1084w,/storage/hochschule/upload/151022-0041.jpg 1170w,"  sizes="(max-width: 767px) 764px, (min-width: 768px) and (max-width: 991px) 1084px, (min-width: 992px) 1170px"  alt="" > -->
    </div>
    <div class="stage-image-item">
        <!-- <img src="/storage/hochschule/upload/151013-7145.jpg" srcset="/storage/_processed_/e/6/csm_151013-7145_42e2692215.jpg 764w,/storage/_processed_/e/6/csm_151013-7145_3ee771dee1.jpg 1084w,/storage/hochschule/upload/151013-7145.jpg 1170w,"  sizes="(max-width: 767px) 764px, (min-width: 768px) and (max-width: 991px) 1084px, (min-width: 992px) 1170px"  alt="" > -->
    </div>
    <div class="stage-image-item">
        <!-- <img src="/storage/hochschule/upload/151104-1433.jpg" srcset="/storage/_processed_/f/b/csm_151104-1433_7bf357e27a.jpg 764w,/storage/_processed_/f/b/csm_151104-1433_b7c9f24147.jpg 1084w,/storage/hochschule/upload/151104-1433.jpg 1170w,"  sizes="(max-width: 767px) 764px, (min-width: 768px) and (max-width: 991px) 1084px, (min-width: 992px) 1170px"  alt="" > -->
    </div>
    <div class="stage-image-item">
        <!-- <img src="/storage/hochschule/upload/150930-6077.jpg" srcset="/storage/_processed_/a/e/csm_150930-6077_d7a31d91e3.jpg 764w,/storage/_processed_/a/e/csm_150930-6077_87603957bf.jpg 1084w,/storage/hochschule/upload/150930-6077.jpg 1170w,"  sizes="(max-width: 767px) 764px, (min-width: 768px) and (max-width: 991px) 1084px, (min-width: 992px) 1170px"  alt="" > -->
    </div>
</div>

然后从其中随机删除 HTML 注释，然后浏览器加载它们。

(function ($) {
    $.fn.rand = function () {
        return this.eq(Math.floor(Math.random() * this.length));
    };
})(jQuery);


// Get random image
var stageImageDiv = $(this).find('.stage-image');
$(stageImageDiv).children().rand().replaceWith(function () {
    var string = $(this).html();
    return string.replace(/<!--/g, '').replace(/-->/g, '');
});

【讨论】：

【解决方案3】：

因为您已经在使用 VHS：

使用v:iterator.random - https://viewhelpers.fluidtypo3.org/fluidtypo3/vhs/5.0.1/Iterator/Random.html

但请确保您了解上述@biesior (How to show a random image from image array in TYPO3 Fluid Template?) 描述的“结果被缓存”的陷阱。

【讨论】：

【解决方案4】：

正如我在评论中提到的，您可以创建自己的 ViewHelper，无论如何，快速的解决方法是在代码中使用 jQuery。首先，默认隐藏所有图片，然后随机显示一张。

<f:if condition="{field.image}">
    <f:then>
        <f:for each="{field.image}" as="image" iteration="iterator">
            <f:image src="file:{image.properties.uid}" alt="" class="img-fluid random-image" style="display: none" width="1250c" height="600c" />
        </f:for>
        <script>

            $("img").not(":visible").each(function () {
                $(this).data("src", this.src);
                this.src = "";
            });

            shuffle($(".random-image")).slice(0, 1).each(function () {
                $(this).attr('src', $(this).data('src')).show();
            });

            // shuffle function thanks to Jon: 
            // https://stackoverflow.com/a/11186765/1066240
            function shuffle(array) {
                let m = array.length, t, i;
                while (m) {
                    i = Math.floor(Math.random() * m--);
                    t = array[m];
                    array[m] = array[i];
                    array[i] = t;
                }
                return array;
            }
        </script>
</f:if>

注意这种方法应该被视为dirty-hack，并且可以做得更好，即避免加载永远不会显示的图像（在此页面上刷新）。还请记住，您可以使用 slice(0, 3) 显示即 3 张随机图像，但是，您需要确保您至少有 3 张图像。

【讨论】：