Отображение сетки в виде галереи для расширенных пользовательских полей 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, и, похоже, это общая проблема. ТИА.

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;
}