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

这项工作将在gallery或repeater字段中完成，两者都返回数组。

你只是忘了在循环中添加迭代$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计数画廊图像

2 个答案: