将不同的类插入到 foreach 循环中 Wordpress答案

【问题标题】：Insert different class into foreach loop Wordpress将不同的类插入到 foreach 循环中 Wordpress
【发布时间】：2022-12-17 22:27:26
【问题描述】：

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

现在的情况我有一个像这样的 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; ?>

理想情况有了这个循环，我想以一个自身循环的网格模式显示图像（如下图所示。

我认为要实现这一点，我需要为循环的前 2 个元素添加一个“grid-lg-img”，然后为循环的第 3、4、5 项添加一个“grid-sm-img”，然后一次又一次具有相同的 2-3-2-3-... 模式。

是否可以制定这样的解决方案？或者也许我看错了方向？

谢谢你。

【问题讨论】：

添加一个循环计数器变量（第一次迭代从 0 开始），并使用模运算符。当$counter % 5 < 2时，你要输出你的lg类，否则sm。

标签： php wordpress foreach

【解决方案1】：

您只能使用 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;
}

【讨论】：

【解决方案2】：

您可以使用 CSS grid 轻松完成此操作。

如果您使网格的总列数可以被您想要的“大”和“小”尺寸的实际列数整除，那么您可以只针对前两个元素并使它们跨越您想要的许多列喜欢。

所以，在这里你希望你的大图像是一半宽度，而较小的图像将是三分之一宽度。 6 可以被 2 和 3 整除，所以你的半宽图像可以是 6 个可用列中的 3 个，而你的第三个宽度图像可以是 6 个中的 2 个。

html,
body {
  min-height: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery {
  max-width: 75%;
  padding: 1.5em;
  background: #f2f2f2;
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(6, 1fr);
}

.gallery__item:nth-of-type(1),
.gallery__item:nth-of-type(2) {
  grid-column: span 3;
}

.gallery__item {
  width: 100%;
  grid-column: span 2;
}

<html lang="en">

<head></head>

<body>

  <div class="gallery">
    <img class="gallery__item" src="https://unsplash.it/300/200/?random" />
    <img class="gallery__item" src="https://unsplash.it/300/200/?random" />
    <img class="gallery__item" src="https://unsplash.it/300/200/?random" />
    <img class="gallery__item" src="https://unsplash.it/300/200/?random" />
    <img class="gallery__item" src="https://unsplash.it/300/200/?random" />
    <img class="gallery__item" src="https://unsplash.it/300/200/?random" />
    <img class="gallery__item" src="https://unsplash.it/300/200/?random" />
    <img class="gallery__item" src="https://unsplash.it/300/200/?random" />
  </div>

</body>

</html>

进一步阅读网格here。

【讨论】：

【解决方案3】：

你可以用 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; ?>

【讨论】：