Advanced custom fieldの画像の表示するコードいろいろ

Advanced custom fieldの画像の表示するコードいろいろ

参考URL
http://www.advancedcustomfields.com/resources/image/

例)

1、advanced custom fieldの画像のところで、返り値を「画像ID」ではなく、「画像オブジェクト」を選ぶ。
2、実際に表示させるテンプレートの部分に以下を記載する。

※$image = get_field(‘before-photo01’);の、before-photo01の部分は自分でつけたフィールド名にしてください!

<?php 
$image = get_field('before-photo01');
if( !empty($image) ): 
	// vars
	$url = $image['url'];
	$title = $image['title'];
	$alt = $image['alt'];
	$caption = $image['caption'];
	// thumbnail
	$size = 'beforeafter-thumbnails';
	$thumb = $image['sizes'][ $size ];
	$width = $image['sizes'][ $size . '-width' ];
	$height = $image['sizes'][ $size . '-height' ];
	if( $caption ): ?>
		<div class="wp-caption">
	<?php endif; ?>
	<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
		<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
	</a>
	<?php if( $caption ): ?>
			<p class="wp-caption-text"><?php echo $caption; ?></p>
		</div>
	<?php endif; ?>
<?php endif; ?>

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP