ACF четный / нечетный повторитель

#php #html #wordpress #advanced-custom-fields

#php #HTML #wordpress #дополнительно-пользовательские-поля

Вопрос:

Я пытаюсь создать элемент из двух столбцов, используя поля повторителя ACF. Единственное, я пытаюсь чередовать это так, чтобы содержимое в двух столбцах переключалось влево / вправо в зависимости от четности или нечетности строки.

Вывод будет выглядеть примерно так:

Строка 1: Изображение (левый столбец), Описание (правый столбец)

Строка 2: Описание (левый столбец), изображение (правый столбец)

Строка 3: Изображение (левый столбец), Описание (правый столбец)

Строка 4: Описание (левый столбец), изображение (правый столбец)

.

.

.

Вот как я это зациклил:

 <section id="projects" class="container specific-margin-1">
        <div class="row specific-padding-4">
            <div class="container col-lg-12">
                <center><h2>FEATURED PROJECTS</h2></center>
            </div><!-- col-lg-12  --> 
        </div><!-- row  -->

            <!-- Repeater --> 
            <div class="row">
            <?php $row = 0; //<-- set your counter to 0
                        if(get_field('featured_projects')): ?>
            <?php while(has_sub_field('featured_projects')): ?>

                <?php if ($counter % 2 === 0) :?>
                <div class="row">
                    <!-- right column -->
                    <div class="col-lg-9 col-md-8 col-sm-6">
                        <img src="<?php the_sub_field('project_image'); ?>" />
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                            <?php the_sub_field('project_details'); ?>
                    </div><!-- right column -->
                </div>

                <?php else: ?>

                <div class="row">
                    <!-- left column -->
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <?php the_sub_field('project_details'); ?>
                    </div>

                    <div class="col-lg-9 col-md-8 col-sm-6">
                        <img src="<?php the_sub_field('project_image'); ?>" />
                    </div><!-- left column -->
            </div>
            <?php endif; ?>

            <?php $row  ; endwhile; ?>

            <?php endif; ?>
        </div><!-- Repeater -->
    </section>

1. Если вы используете bootstrap, вероятно, было бы лучше, чтобы HTML-код каждой строки был одинаковым. Затем добавьте классы смещения в столбцы нечетных строк. Таким образом, все будет хорошо складываться на мобильных устройствах.

Ответ №1:

Обязательно измените поле изображения ACF на «Массив изображений»:

Поле изображения ACF

 <!-- Repeater -->
<div class="row">
  <?php $i=0 ; if(get_field( 'featured_projects')): ?>
  <?php while(has_sub_field( 'featured_projects')): $i  ; ?>
  <?php $image=get_sub_field( 'project_image'); ?>
  <div class="row">
    <!-- right column -->
    <div class="col-lg-9 col-md-8 col-sm-6">
      <?php if (($i % 2)==0 ): ?>
      <?php the_sub_field( 'project_details'); ?>
      <?php else: ?>
      <img src="<?php echo $image['url']; ?>" />
      <?php endif; ?>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
      <?php if (($i % 2)==0 ): ?>
      <img src="<?php echo $image['url']; ?>" />
      <?php else: ?>
      <?php the_sub_field( 'project_details'); ?>
      <?php endif; ?>
    </div>
    <!-- right column -->
  </div>

  <?php endwhile; ?>

  <?php endif; ?>
</div>
<!-- Repeater -->

1. Спасибо за помощь!

2. Но как мне на самом деле изменить размер столбца?

3. Вы могли бы сделать что-то вроде этого: <div class="<?php if (($i % 2)==0 ): ?>col-lg-9 col-md-8 col-sm-6<?php else: ?>col-lg-3 col-md-4 col-sm-6<?php endif; ?>"> и переключать классы в div ниже.

Ответ №2:

Если кто-то ищет самый простой ответ (разделить строки на четные / нечетные), мы можем использовать функцию get_row_index() для проверки текущей строки.

Формат кода должен быть таким:

 while( have_rows('featured_projects') ): the_row();

    if( get_row_index() % 2 == 0 ){
        
        // this is an even row
        
    } else {
        
        // this is an odd row
        
    }

endwhile;