个性化阅读
专注于IT技术分析

第n行ACF REPEATER的不同布局

我正在使用ACF中继器来显示图像, 我想实现布局, 以便1-2-3个元素与col-lg-4网格配合使用, 而4-5-6-7与col-lg-3网格相配合, 依此类推, 对所有项目重复该布局

我试过使用, 但它是将3个元素分成1个div

我的布局大部分是

first row 3x col-lg-4
second row 4x col-lg-3
third row 3x col-lg-4
fourth row 4x col-lg-3 


<?php 

// check if the repeater field has rows of data
if( have_rows('gallery_repeater') ):
    // loop through the rows of data

    // add a counter
    $count = 0;
    $group = 0;

    while ( have_rows('gallery_repeater') ) : the_row(); 
      // vars
      $teacher_bio = get_sub_field('image');
      if ($count % 3 == 0) {
        $group++;
        ?>
          <div id="teachers-<?php echo $group; ?>" class="cf group-<?php echo $group; ?>">
        <?php 
      }
      ?>
      <div class="teacher">
        <img src="<?php the_sub_field('image'); ?>" />

        <?php echo $teacher_bio; ?>
      </div><!-- .teacher -->
      <?php 
        if ($count % 3 == 2) {
          ?>
            </div><!-- #teachers -->
          <?php 
        }
        $count++;
      endwhile;
  else :
    // no rows found
  endif;

?>

#1


你好, 请检查以下代码以供参考:

$gallery_repeater = get_field('gallery_repeater');
foreach (array_chunk($gallery_repeater, 7) as $key => $value) {
    foreach ($value as $k => $val) {
        $class = $k < 3 ? 'col-lg-3' : 'col-lg-4';
        echo '<div class="'.$class.'"> <img src="'.$val['image'].'" />'.$val['teacher_bio'].'</div>';
    }
}
赞(0)
未经允许不得转载:srcmini » 第n行ACF REPEATER的不同布局

评论 抢沙发

评论前必须登录!