我正在使用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="http://www.srcmini.com/<
?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【第n行ACF REPEATER的不同布局】你好, 请检查以下代码以供参考:
$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>
';
}
}
推荐阅读
- 2021年项目实战-升级项目实战
- 检测你是否在Visual Composer WordPress中处于”前端编辑器”模式
- 演示的默认主页不能被覆盖
- 更新父级后调试WordPress子级主题
- 在functions.php中的破折号
- 自定义WordPress菜单替换当前的标题菜单
- 产品详细信息页面的自定义模板为空-Woocommerce
- WordPress可视编辑器中的自定义样式不会将类应用于链接元素
- 在定制器屏幕上时,定制器选项未返回默认值