使用相册功能实现图标组效果,可以进行图片,中英文以及超链接的控制,灵活运用

添加字段-相册

实例代码

<div class="icon">
    <?php 
    // 检测字段组
    $images = get_field('lessons-icons');
      if( $images ): ?>
              <?php foreach( $images as $image ): ?>
                  <div class="col-md-4">
                  <li>
                    <!-- 打印图片地址和alt信息 -->
                      <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                      <div class="text">
                          <div class="title">
                            <!-- 打印图片alt信息,应用为英文名称 -->
                              <div class="en"><?php echo $image['alt']; ?></div>
                            <!-- 打印图片titile信息,应用为中文名称 -->
                              <div class="cn"><?php echo $image['title']; ?></div>
                          </div>
                          <!-- 打印图片caption信息,应用为超链接 -->
                          <a href="#<?php echo $image['caption']; ?>" class="btn btn-lg more">查看介绍  <i class="icon ion-md-arrow-down"></i></a>
                      </div>
                  </li>
                  </div>
              <?php endforeach; ?>
      <?php endif; ?>
</div>  

后台控制效果