如何在Advanced Custom Fields Repeater中调用WordPress大尺寸图片

嘿，我来帮你搞定这段代码！你的需求是只展示ACF Repeater字段里第一行的图片，并且用WordPress默认的large尺寸，原代码的问题主要是没指定尺寸，而且缺少空值判断容易报错，下面是修正后的方案：

问题分析 #

1. 原代码直接取$img['url']得到的是图片原图地址，没有用到WordPress生成的large尺寸缩略图
2. 没有检查Repeater字段是否为空，当字段无内容时会抛出PHP警告

修正后的代码（两种可选方案） #

方案1：基于WordPress原生函数推荐

如果你的ACF图片字段设置为返回ID，用这个方案最稳妥：

<?php
// 获取Repeater字段数据
$floorplans = get_field('floorplans');

// 先确认Repeater有内容，且首行存在图片字段
if ($floorplans && isset($floorplans[0]['floorplan'])) {
    // 获取large尺寸的图片信息（返回数组：[0]是URL，[1]宽度，[2]高度）
    $large_image_data = wp_get_attachment_image_src($floorplans[0]['floorplan'], 'large');
    
    // 确认图片数据有效
    if ($large_image_data) {
        // 获取图片的alt文本（优先用ACF设置的，没有则用附件的alt元数据）
        $alt_text = get_post_meta($floorplans[0]['floorplan'], '_wp_attachment_image_alt', true);
        ?>
        <img 
            src="<?php echo esc_url($large_image_data[0]); ?>" 
            alt="<?php echo esc_attr($alt_text); ?>" 
            width="<?php echo esc_attr($large_image_data[1]); ?>" 
            height="<?php echo esc_attr($large_image_data[2]); ?>"
        >
        <?php
    }
}
?>

方案2：基于ACF图片对象（适合字段设置为返回对象）

如果你的ACF图片字段设置为返回对象，可以直接从对象里读取尺寸信息：

<?php
$floorplans = get_field('floorplans');

if ($floorplans && isset($floorplans[0]['floorplan'])) {
    $img_object = $floorplans[0]['floorplan'];
    // 从对象中提取large尺寸的URL、宽高
    $large_img_url = $img_object['sizes']['large'];
    $large_width = $img_object['sizes']['large-width'];
    $large_height = $img_object['sizes']['large-height'];
    // 处理alt文本
    $alt_text = $img_object['alt'] ?: get_post_meta($img_object['ID'], '_wp_attachment_image_alt', true);
    ?>
    <img 
        src="<?php echo esc_url($large_img_url); ?>" 
        alt="<?php echo esc_attr($alt_text); ?>" 
        width="<?php echo esc_attr($large_width); ?>" 
        height="<?php echo esc_attr($large_height); ?>"
    >
    <?php
}
?>

关键改进点 #

• 空值判断：避免Repeater为空时的PHP警告
• 指定尺寸：明确获取WordPress生成的large尺寸缩略图，而不是原图
• 安全转义：用esc_url和esc_attr处理输出内容，符合WordPress安全规范
• 可访问性：正确获取并输出图片的alt文本

内容的提问来源于stack exchange，提问作者Reece