显示高级自定义字段的画廊网格视图 Wordpress

Question

我在 ACF 中创建了一个图库字段组，如下图所示。

为了在我的 wordpress 页面上显示它，我在 php 文件中添加了以下代码。

<?php 

$images = get_field('employee_testimonial_gallery');

if( $images ): ?>
<ul>
    <?php foreach( $images as $image ): ?>
        <li>
                 <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />

            <p><?php echo $image['caption']; ?></p>
        </li>
    <?php endforeach; ?>


</ul>

但最终结果显示为列表

我需要将图像显示为如下所示的网格

我已阅读有关 ACF 的所有文档，这似乎是一个普遍问题。 TIA。

Answer 1

添加以下 css 以将其列为网格。在开始之前，只需将一个类添加到您的输出 html 标记中。

<ul class="gal-grid">
<?php foreach( $images as $image ): ?>
    <li>
             <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />

        <p><?php echo $image['caption']; ?></p>
    </li>
<?php endforeach; ?>
</ul>

然后在此标记更改应用下面的 css 之后，

ul.gal-grid li{
display: inline-block;
float: left;
margin: 0 10px 0 0;
}

ul.gal-grid li:last-child{
margin-right: 0 !important;
}