时间戳

首页 > 解决方案 > ACF Gallery - 使用 Bootstrap 4 一次显示 4 个项目

advanced-custom-fields - ACF Gallery - 使用 Bootstrap 4 一次显示 4 个项目

问题描述

我在 WordPress ACF 中使用图库字段，我想一次只显示四个图库。因此，为了实现这一点，我在 Bootstrap 4 中获取了一些用于多轮播的代码，并希望使用 ACF Gallery 和 PHP 来实现同样的效果。

这是我的代码尝试：

            <div class="row blog">
                <div class="col-md-12">
                    <div id="blogCarousel" class="carousel slide" data-ride="carousel">

                        [...]

                        <!-- Carousel items -->
                        <div class="carousel-inner">

                            <?php
                                $images = get_sub_field('gallery');
                                $i = 0;
                                $j = 0;
                                $internal_counter = 0;
                            ?>

                            <?php while ( $i < $gallery_size ): ?>
                                <?php if ( $i % 4 === 0 ): ?>
                                    <div class="carousel-item <?php if ( $internal_counter === 0 ): echo 'active'; endif; ?>">
                                        <div class="row">
                                            // BEGIN this is the part where i'm stuck on
                                            <?php for ( $j = 0; $j < count ( $images ); $j++ ): ?>
                                                <div class="col-md-3">
                                                    <a href="<?php echo $images[$j]['url']; ?>" data-toggle="lightbox" data-gallery="dayhome-gallery">
                                                        <img src="<?php echo $images[$j]['sizes']['large']; ?>" alt="<?php echo $images[$j]['alt']; ?>" />
                                                    </a>
                                                </div>
                                            <?php endfor; ?>
                                            // END this is the part where i'm stuck on
                                        </div>
                                    </div>
                                    <?php $internal_counter++; ?>
                                <?php endif; ?>
                                <?php $i++; ?>
                            <?php endwhile; ?>
                        </div>
                    </div>

                </div>
            </div>

我在上面的评论中强调了我坚持的地方。现在它只为每个轮播项目一次显示 8 张图片，如下图所示：

在此处输入图像描述

这是我想要的效果：

在此处输入图像描述

因此，在这个特定的画廊中，我想一次只展示四张图片。我正在考虑执行这样的操作：

<?php
  if ( $j % 4 === 0 ):
    break;
  endif;
?>

...但它立即中断，因为我开始$j为 0，因为我还需要画廊中的第零个项目。

感谢您对我的代码的任何帮助。

标签： advanced-custom-fields

解决方案

解决了！！！

<div class="carousel-item <?php if ( $internal_counter === 0 ): echo 'active'; endif; ?>">
    <div class="row">
        <?php while ( $j < count( $images ) ): ?>
            <div class="col-md-3">
                <a href="<?php echo $images[$j]['url']; ?>" data-toggle="lightbox" data-gallery="dayhome-gallery">
                    <img src="<?php echo $images[$j]['sizes']['large']; ?>" alt="<?php echo $images[$j]['alt']; ?>" />
                </a>
            </div>
            <?php if ( ++$j % 4 === 0 ): ?>
                <?php break; ?>
            <?php endif; ?>
        <?php endwhile; ?>
    </div>
</div>

在将变量与模数 4 进行比较之前，我必须确保++$j对变量进行预迭代。

推荐阅读