带有图像的ACF中继器,仅显示一些自定义CSS的前3个图像

时间:2018-06-11 07:00:44

标签: php wordpress

我的网站上有一个关于页面的自定义图片字段,就像一个图片大小不同的小图库。我不想遍历所有想要按顺序在不同列中显示3个图像的图像。我怎么能这样做?任何帮助,将不胜感激。在这里,我提供的代码不起作用。

 <div class="row fm-about-gallery-grid">
     <?php if( have_rows('fima_check_courses_images') ): ?>
     <?php while(have_rows('fima_check_courses_images')): the_row();
     $fima_check_courses_image = get_sub_field('fima_check_courses_image');
      ?>
        <div class="col-sm-7">
           <div class="fm-about-gallery-image">
            <?php if($fima_check_courses_image):?>
       <img alt="" src="<?php echo $fima_check_courses_image[0]['url']; ?>">
            <?php endif; ?>
            </div>
         </div>
         <div class="col-sm-5">
         <div class="fm-about-gallery-image">
       <img alt="" src="<?php echo $fima_check_courses_image[0]['url']; ?>">
         </div>
         </div>
       <div class="col-sm-12">
       <div class="fm-about-gallery-image">
     <img alt="" src="<?php echo $fima_check_courses_image[0]['url']; ?>">
       </div>
       </div>
       <?php endwhile; ?>
       <?php endif; ?>
  </div>

1 个答案:

答案 0 :(得分:1)

您可以使用以下代码。这里我使用css类数组和计数器来帮助您实现功能。

   <div class="row fm-about-gallery-grid">
       <?php if( have_rows('fima_check_courses_images') ): ?>
       <?php 
         $classarray=array("col-sm-7","col-sm-5","col-sm-12"); // add columns classes
         $index=0; //counter
         while(have_rows('fima_check_courses_images')): the_row();
         $fima_check_courses_image = get_sub_field('fima_check_courses_image');

  ?>
    <div class="col-sm-<?php echo $classarray[$index];?>">
       <div class="fm-about-gallery-image">
        <?php if($fima_check_courses_image):?>
   <img alt="" src="<?php echo $fima_check_courses_image['url']; ?>">
        <?php endif; ?>
        </div>
     </div>       

   <?php 
   $index++; 
   if($index==3) break;
   endwhile; ?>
   <?php endif; ?>
   </div>