wall.php 1.78 KB
<?php

/**
 * Wall Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

?>
<button class="toggle" id="direction-toggle">
  <span>Toggle scroll axis</span>
  <svg aria-hidden="true" viewBox="0 0 512 512" width="100" title="arrows-alt-h">
    <path d="M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z" />
  </svg>
</button>
<?php if( have_rows('wall') ): ?>  
    <?php $rowCount = count( get_field('wall') );
   $dir = get_field('direction');
   if( $dir == 'right'){
    $marquee = 'marquee--reverse';
   }  ?> 
    

    <article class="wrapper">
  <div class="marquee <?php echo  $marquee; ?>">
    <div class="marquee__group">     
            <?php while( the_repeater_field('wall') ): ?>
                <?php $image = get_sub_field('image'); ?>
               
                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
  
           <?php endwhile; ?>
         </div>
         <div aria-hidden="true" class="marquee__group  <?php echo  $marquee; ?>">
            <?php while( the_repeater_field('wall') ): ?>
                <?php $image = get_sub_field('image'); ?>
               
                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
  
           <?php endwhile; ?>
         </div>
    </div>
</div>


<?php endif; ?>