ACF 计数图库图像

Question

我正在尝试使用 ACF 画廊字段制作不同尺寸图像的网格。

我之前通过计算行数在转发器字段中设法做到了这一点，但无法调整它以使用画廊字段。

我的目标是使用 2 种不同的图像尺寸制作 10 张图像的网格。

图片 1、2、3、6、7、8 是一个尺寸
图片 4、5、9、10 的尺寸不同

我当前的标记是：

<?php 
    $images = get_field('home-image-grid');
    $size = 'full';
    if( $images ): 
?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
                <?php echo wp_get_attachment_image( $image['ID'], $size ); ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

我已经尝试过我之前在转发器字段中使用的标记，但这只输出图像 1。

<?php 
    $i = 1;
    $images = get_field('home-image-grid');
    $size = 'full';
    if( $images ): 
?>

    <?php foreach( $images as $image ): ?>

        <?php if ( $i == 1 ) { ?>
            image 1
        <?php } elseif ( $i == 2 ) { ?>
            image 2
        <?php } elseif ( $i == 3 ) { ?>
            image 3
        <?php } elseif ( $i == 4 ) { ?>
            image 4
        <?php } ?>

    <?php endforeach; ?>

<?php endif; ?>

我认为这是因为 foreach 语句。我怎样才能让它工作？

Answer 1

这项工作将在画廊或转发器字段中完成，两者都是 return 数组。

您只是忘记在循环中添加迭代 $i++。

所以你的循环会像

<?php foreach( $images as $image ): ?>

    <?php if ( $i == 1 ) { ?>
        image 1
    <?php } elseif ( $i == 2 ) { ?>
        image 2
    <?php } elseif ( $i == 3 ) { ?>
        image 3
    <?php } elseif ( $i == 4 ) { ?>
        image 4
    <?php } 
     $i++;
     endforeach; ?>

此外，如果您的数组索引没有任何复杂的条件，那么您可以使用带有数组索引的 foreach 循环，例如

<?php foreach( $images as $index => $image ): ?>

    <?php if ( $index == 0 ) { ?>
        image 1
    <?php } elseif ( $index == 1 ) { ?>
        image 2
    <?php } elseif ( $index == 2 ) { ?>
        image 3
    <?php } elseif ( $index == 3 ) { ?>
        image 4
    <?php } 
     endforeach; ?>

Answer 2

如果有 2 个分开的背景图片：

<div class="d-container"><div class="diagonal diagonal--left" style="background-image: url(
 <?php
  if ( $course_zig_images ) :
   foreach ( $course_zig_images as $index => $course_zig_image ) :
    if ($index == 0 ) :
     echo $course_zig_image['url'];
    endif;
   endforeach;
  endif;
 ?>
 )"></div></div>
  
  
  <div class="d-container"><div class="diagonal diagonal--right" style="background-image: url(
 <?php
 if ( $course_zig_images ) :
  foreach ( $course_zig_images as $index => $course_zig_image ) :
   if ($index == 1 ) :
    echo $course_zig_image['url'];
   endif;
  endforeach;
 endif;
 ?>
 )"></div></div>

ACF 计数图库图像

ACF count gallery images

php

wordpress

advanced-custom-fields

acfpro