我正在寻找创建一个函数来增加ACF循环中数据选择器的值

Question

I'm working on a WP site with ACF (flexible content) and AOS.js

I'm trying to have the data-as-delay increment with each element added to the page.

I have tried wrapping everything in a <ul><li> but then I'd have to change all my CSS to accommodate. Since I'm trying to learn, I figured I'd try to create a function. But I don't know where to start.

<?php while ( have_rows('panneau') ) : the_row(); ?>
  <div class="col" data-aos="fade-right" data-aos-delay="200">
    <?php $image = get_sub_field('image'); if( !empty($image) ): ?>
      <img src="<?= $image['url']; ?>" alt="<?= $image['alt']; ?>" />
    <?php endif; ?>
  </div>
<?php endwhile; ?>

So I'd like every new img to have 200ms more delay!

Answer 1

A simple incremator in your loop should do the trick.

<?php $i = 200; ?>

<?php while ( have_rows('panneau') ) : the_row(); ?>
  <div class="col" data-aos="fade-right" data-aos-delay="<?php echo $i; ?>">
    <?php $image = get_sub_field('image'); if( !empty($image) ): ?>
      <img src="<?= $image['url']; ?>" alt="<?= $image['alt']; ?>" />
    <?php endif; ?>
  </div>

<?php $i = $i + 200;?>

<?php endwhile; ?>