php 在foreach循环中插入不同的类

nzk0hqpo 于 2022-12-10 发布在 PHP

关注(0)|答案(3)|浏览(210)

我今天在这里写作是因为我需要一些帮助来将不同的类插入到foreach循环中。

CURRENT SITUATION我有一个foreach循环，如下所示：

<?php
$propertyImages = get_field('property_images');
if( $propertyImages ): 
?>
    <div class="container">
        <?php foreach( $propertyImages as $propertyImage ): ?>
            <a class="gallery-item href="<?php echo esc_url($propertyImage['url']); ?>">
               <img class="gallery-img" src="<?php echo esc_url($propertyImage['sizes']['medium']); ?>"/>
            </a>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

DESIRED SITUATION通过这个循环，我想以循环的网格模式显示图像（就像你在下面的图像中看到的那样）。

我认为，为了实现这一点，我需要为循环的前2个元素添加“grid-lg-img”，然后为循环的第3个、第4个、第5个元素添加“grid-sm-img”，然后一次又一次地使用相同的2-3-2-3-...模式。
有没有可能设计出这样一个解决方案？或者也许我看错了方向？

谢谢-谢谢

php

来源：https://stackoverflow.com/questions/74730861/insert-different-class-into-foreach-loop-wordpress

3条答案

按热度按时间

zsbz8rwp1#

您只能使用CSS。

.container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
a.gallery-item {
   display: block;
}
a.gallery-item:nth-child(5n+1) {
   flex: 1 50%;
}
a.gallery-item:nth-child(5n+2) {
   flex: 1 50%;
}
a.gallery-item:nth-child(5n+3),
a.gallery-item:nth-child(5n+4)
a.gallery-item:nth-child(5n+5) {
   flex: 1 33,333333336%;
}
a.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

赞(0）回复(0）举报 2022-12-10

xbp102n02#

您可以使用CSS grid轻松完成此操作。
如果您使网格的总列数可以被您希望的“大”和“小”大小的实际列数整除，那么您可以只针对前两个元素，使它们跨越您希望的任何列数。
因此，这里您希望大图像为半宽，小图像为三分之一宽。6可被2和3整除，因此半宽图像可以是6个可用列中的3个，第三个宽度图像可以是6个可用列中的2个。
第一个
进一步阅读网格here。

赞(0）回复(0）举报 2022-12-10

plicqrtu3#

你可以用while把它包起来

<?php
$propertyImages = get_field('property_images');
while($propertyImages) : $i =0;
if( $propertyImages ): 
?>
    <div class="container">
        <?php foreach( $propertyImages as $propertyImage ): ++$i; ?>
            <a class="gallery-item-<?php echo $i?> href="<?php echo esc_url($propertyImage['url']); ?>">
               <img class="gallery-img" src="<?php echo esc_url($propertyImage['sizes']['medium']); ?>"/>
            </a>
        <?php endforeach; ?>
    </div>
<?php endif; ?>
<?php endwhile; ?>

赞(0）回复(0）举报 2022-12-10

我来回答

php 在foreach循环中插入不同的类

3条答案

相关问题

热门标签

最新问答