wordpress: リピーターフィールドに追加した画像を任意のサイズで表示したい

こんにちは。

やりたいことは題名のとおりなのですが、フロント側の表示との兼ね合いもあり少し複雑なので、もしこうやればできるよ、という方いらっしゃいましたらご助言いただければと思います。

ソース：

現在制作中のサイトにて、トップページにおすすめを表示しよう、ということになり
写真を丸い枠の中に丸く、その下にキャプションを表示しようということで写真とキャプションでワンセットの繰り返しフィールドを作成し、上記のようなソースを書きました。

現在フロント側の表示は全く問題なく綺麗にできているのですが、クライアントが大きなサイズの画像を('ichioshi_pic')フィールドに追加してしまった場合、サイトの表示が重くなるのではないか、との指摘を受けました。(CSSで見かけのサイズを指定していますが、ファイルサイズが大きすぎるのでは、ということ)

そこで、上記ソース中の

<div class="ichioshiPic" style="background-image:url(<?php the_sub_field('ichioshi_pic'); ?>);" ></div> 部分、枠となるdiv.ichioshiBox内に丸で表示するためにdivのbackground-imageとしてhtml内に直接指定し追加したこのフィールドの画像を、何とかしてwordpressにて自動生成された小さなサイズのものを引っ張ってこれるようにしたいのですが、なにかいい案がある方はいらっしゃいますか？

行動規範の内容に同意します

回答1件

ベストアンサー

画像のサブフィールドの返り値を「画像URL」ではなく、「画像配列」で設定すれば、
サイズが指定できます。

php
1<section class="top-ichioshi">
2
3<?php if(have_rows('ichioshi_picset')): ?>
4<?php while(have_rows('ichioshi_picset')): the_row(); ?>
5
6<div class="ichioshiBox" >
7
8<?php
9  $image = get_sub_field('ichioshi_pic');
10  $size = 'thumbnail'; // お好きなサイズで
11?>
12
13<a href="<?php echo the_permalink();?>"><div class="ichioshiPic" style="background-image:url(<?php echo $image['sizes'][$size]; ?>);" ></div></a>
14<h3><?php the_sub_field('ichioshi_caption'); ?></h3>
15</div>
16
17<?php endwhile; ?>
18<?php endif; ?><!-- △ ループ終了 △ -->
19
20</section>