繰り返しフィールドでもOK！ACFで画像サイズを指定して出力するコード

ACFで画像サイズを指定して表示するコードリストです。
function.phpにメディアサイズを追加するコードも入れています。

2022年12月14日に更新しました。
PHP8以降でエラーが出るため更新しました。
Advanced Custom Fieldの公式ページから引用しております。
https://www.advancedcustomfields.com/resources/image/

function.phpに画像サイズを追加するコード

add_image_size( $name, $width, $height, $crop );

例：
フィールド名:○○○
true:トリミングする
false:トリミングしない

add_image_size('○○○', 150, 150, true);

画像の出力

<?php 
$image = get_field('image');
if( !empty( $image ) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

画像サイズを指定して出力

フィールド名:○○○
サイズ：△△△

<?php
$image = get_field('○○○');
if( $image ):
    // 画像変数の設定を簡潔に
    $url = esc_url($image['url']);
    $title = esc_attr($image['title']);
    $alt = esc_attr($image['alt']);
    // サムネイルサイズ属性
    $size = '△△△';
    $thumb = esc_url($image['sizes'][ $size ]);
?>
    <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
        <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
    </a>
<?php endif; ?>

画像サイズを指定して出力（キャプション有）

ACFの「返り値のフォーマット」で「画像　配列」を選択

フィールド名:○○○
サイズ：△△△

<?php
$image = get_field('○○○');
if ($image):
    // サムネイルサイズ属性
    $size = '△△△';
    $thumb = $image['sizes'][$size];
    $width = $image['sizes'][$size . '-width'];
    $height = $image['sizes'][$size . '-height'];

    // キャプションラップ開始
    if ($image['caption']): ?>
        <div class="wp-caption">
    <?php endif; ?>

    <a href="<?php echo esc_url($image['url']); ?>" title="<?php echo esc_attr($image['title']); ?>">
        <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($image['alt']); ?>" width="<?php echo esc_attr($width); ?>" height="<?php echo esc_attr($height); ?>" />
    </a>

    <?php 
    // キャプションラップ終了
    if ($image['caption']): ?>
        <p class="wp-caption-text"><?php echo esc_html($image['caption']); ?></p>
        </div>
    <?php endif; ?>
<?php endif; ?>

繰り返しフィールドで画像サイズを指定

ACFの繰り返しフィールドで画像サイズを指定して表示出来るようになります。

フィールド名:○○○
サイズ：△△△

<?php
$image = get_sub_field('image');
if( $image ):
    // 画像変数
    $url = $image['url'];
    $title = $image['title'];
    $alt = $image['alt'];
    // サムネイルサイズ属性
    $size = 'thumbnail';
    $thumb = $image['sizes'][ $size ];
?>
    <a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>">
        <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    </a>
<?php endif; ?>