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; ?>
関連記事はこちら!
スポンサーリンク