REST API のスキーマにリピーターフィールドの画像データを格納する

ACF to REST API を使えば REST API でACFの値が取得できますが、カスタマイズした形でカスタムフィールドの値を追加する方法です。
例えばACFフィールドでアップロードした画像は指定している戻り値がREST APIでも返ってきます。
image_field: リピーターの親フィールド
image_sub_field: リピーターの子フィールド(返り値 => 画像ID の場合)
...
"acf": {
"image_field": [
{ "image_sub_field": 164 },
{ "image_sub_field": 165 },
{ "image_sub_field": 166 },
...
このままだとAPIからは画像URLなど取れないので独自で追加する必要があります。
functions.php
<?php
// ...
function register_custom_images_data() {
register_rest_field(
'CUSTOM_POST_TYPE_NAME', // カスタム投稿名
'CUSTOM_REST_API_KEY', // REST API に追加するキー
array(
'get_callback' => 'get_custom_image_data',
'update_callback' => null,
'schema' => null,
)
);
}
add_action( 'rest_api_init', 'register_custom_images_data' );
// リピーター画像取得
function get_custom_image_data( $object, $field_name, $request ) {
$meta_fields = $object['acf']['image_field'];
$meta = array();
foreach ( $meta_fields as $field ) {
$artist_images_full = wp_get_attachment_image_src( $field['image_sub_field'], 'full');
array_push($meta, $artist_images_full);
}
return $meta;
}
// ...
として REST API を叩くと
...
"CUSTOM_REST_API_KEY": [
{
"https:/siteUrl.com/wp-content/uploads/2019/10/sample02.jpg",
1280,
640,
false
},
{
"https:/siteUrl.com/wp-content/uploads/2019/10/sample01.jpg",
1280,
640,
false
},
...
となる
仮に Vue で出力するには
<ul v-for="(image,index) in post.data.CUSTOM_REST_API_KEY" :key="index">
<li>
<img
:src="image[0]"
:data-size="`${image[1]}x${image[2]}`"
>
</li>
</ul>
という感じで出力する