在ACF图像循环中提供较小的图像

Question

我有一个产品概述页面，每个产品有1张图片： https://axces.be/nl/product/

您可以将多个图像添加到产品中。所有这些图像都显示在详细信息页面上。但是在产品页面上，您只会看到第一张图片。

我的模板如下：

<a href="<?php the_permalink(); ?>" class="single-prod">

    <div class="single-prod__image">
        <?php
            $productImages = get_field('product_images');
        ?>

        <img src="<?php echo $productImages[0]['product_image']?>" />
    </div>
</a>

但是现在图像以它们上载的尺寸提供。这会导致加载时间变慢。所以我想提供较小的图像。

我尝试向其添加图像大小缩略图，以查看加载时间是否更好。但这不起作用：

<a href="<?php the_permalink(); ?>" class="single-prod">

    <div class="single-prod__image">
        <?php
            $image_size = 'thumbnail';
            $productImages = get_field('product_images');
        ?>

        <img src="<?php echo $productImages[0]['product_image']['sizes'][$image_size]; ?>" />
    </div>

    <div class="single-prod__information">
        <span class="single-prod__name">
            <?php the_title(); ?>
        </span>

        <span class="single-prod__short">
            <?php the_field('product_short'); ?>
        </span>
    </div>
</a>

所以最终，我想实现图像更小。不必看到缩略图，因为它可能会裁剪图像。

谢谢。