advanced custom fields画像のトリミングについて

[mitsu666]

すみません。
質問させてください。

Advanced Custom Fields「フィールドグループを編集」画面にある「プレビューサイズ」項目で、画像の大きさをそれぞれ「サムネイル」「中」「大」など、
適宜チェクを入れて複数の画像をページに挿入しましたが
すべての画像が「サムネイル」の大きさで表示されてしまいます。
自力で探ってみたところ、

`<?php
$attachment_id = get_field(‘purchase_img01’);
$size = “large”; // (thumbnail, medium, large, full or custom size)
$image = wp_get_attachment_image_src( $attachment_id, $size );
$attachment = get_post( get_field(‘purchase_img01’) );
$alt = get_post_meta($attachment->ID, ‘_wp_attachment_image_alt’, true);
$image_title = $attachment->post_title;
?>

<a href=”<?php echo wp_get_attachment_url( get_field( ‘purchase_img01’,$post->ID) ); ?>” rel=”lightbox”><img src=”<?php echo $image[0]; ?>” width=”<?php echo $image[1]; ?>” height=”<?php echo $image[2]; ?>” alt=”<?php echo $alt; ?>” title=”<?php echo $image_title; ?>” /></a>

とすればlargeサイズでトリミング可能でした。
が、
largeサイズでトリミングしたい画像、
mideumサイズでトリミングしたい画像、
サムネイルサイズでトリミングしたい画像が
３タイプとも複数あるため、

<?php
$attachment_id = get_field(‘purchase_img01’);
$size = “large”; // (thumbnail, medium, large, full or custom size)
$image = wp_get_attachment_image_src( $attachment_id, $size );
$attachment = get_post( get_field(‘purchase_img01’) );
$alt = get_post_meta($attachment->ID, ‘_wp_attachment_image_alt’, true);
$image_title = $attachment->post_title;
?>
<?php
$attachment_id = get_field(‘purchase_img02’);
$size = “large”; // (thumbnail, medium, large, full or custom size)
$image = wp_get_attachment_image_src( $attachment_id, $size );
$attachment = get_post( get_field(‘purchase_img02’) );
$alt = get_post_meta($attachment->ID, ‘_wp_attachment_image_alt’, true);
$image_title = $attachment->post_title;
?>

<a href=”<?php echo wp_get_attachment_url( get_field( ‘purchase_img01’,$post->ID) ); ?>” rel=”lightbox”><img src=”<?php echo $image[0]; ?>” width=”<?php echo $image[1]; ?>” height=”<?php echo $image[2]; ?>” alt=”<?php echo $alt; ?>” title=”<?php echo $image_title; ?>” /></a>

<a href=”<?php echo wp_get_attachment_url( get_field( ‘purchase_img02’,$post->ID) ); ?>” rel=”lightbox”><img src=”<?php echo $image[0]; ?>” width=”<?php echo $image[1]; ?>” height=”<?php echo $image[2]; ?>” alt=”<?php echo $alt; ?>” title=”<?php echo $image_title; ?>” /></a>
`
このように記述してみましたが、
うまくいきません。
どうかご教授ください。

または、トリミングをもっと単純に反映させる方法があれば
お教えていただけると助かります。（「プレビューサイズ」にチェックを入れてもサイズ指定が反映されないのはなぜなのでしょうか。。）
何卒よろしくお願いいたします。

[Kite]

「プレビューサイズ」と言うのは管理画面での表示サイズですので、サイト上での表示とは関係ありません。

これはどちらかと言うとプログラミングの基礎的な話ですが、上記のような順番で記述しますと、purchase_img01 で宣言した変数 $image、$alt、$image_title などは出力する前に purchase_img02 での同じ変数に上書きされてしまいます。おそらく purchase_img02 の画像が2枚出力されているじゃないでしょうか。

purchase_img01 を出力してから purchase_img02 のデータを取得するか、変数名に「01」「02」などを付けてください。

画像の様々なデータを出力する場合は ACF 3.3.7 以上をご使用であれば、「画像オブジェクト」の方が便利だと思います。

ACF 管理画面でイメージフィールドの返り値を「画像オブジェクト」にし、例として下記のように記述します。

<?php
$image01 = get_field('purchase_img01');
$image02 = get_field('purchase_img02');
?>

<a href="<?php echo $image01['url']; ?>" rel="lightbox"><img src="<?php echo $image01['sizes']['large']; ?>" width="<?php echo $image01['sizes']['large-width']; ?>" height="<?php echo $image01['sizes']['large-height']; ?>" alt="<?php echo $image01['alt']; ?>" title="<?php echo $image01['title']; ?>" /></a>

<a href="<?php echo $image02['url']; ?>" rel="lightbox"><img src="<?php echo $image02['sizes']['large']; ?>" width="<?php echo $image02['sizes']['large-width']; ?>" height="<?php echo $image02['sizes']['large-height']; ?>" alt="<?php echo $image02['alt']; ?>" title="<?php echo $image02['title']; ?>" /></a>

画像オブジェクトの中身については ACF の Image のドキュメントの下部に書かれています。なお、ここに書かれていないデータもあるようですので、気になる場合は var_dump() などで確認してみてください。

[mitsu666]

ixkaitoさま

返信が遅くなりすみません。
書き込みありがとうございます！

＞「プレビューサイズ」と言うのは管理画面での表示サイズですので、サイト上での表示とは関係ありません。
なんと。。自動でこの大きさにトリミングしてくれる項目かと思っておりました。。

また、ソースやリンクをご丁寧にありがとうございます。
参考にしてとりすすめてみます！
まだまだ初心者で分からない事だらけですが、がんばります。
お忙しい中、ありがとうございました。