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

Question

我在我的网站上有一个自定义图像字段，关于页面，它就像一个带有不同大小图像的小画廊。我不想遍历所有图像，我想按顺序以不同的列显示 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>

Answer 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>