Question

我尝试使用ACF转发器字段创建一个双列元素。唯一的问题是我试图交替这个，以便两列中的内容左/右切换，具体取决于行是偶数还是奇数。

输出结果如下：

这是我循环的方式：

<section id="projects" class="container specific-margin-1">

        <!-- Repeater -->
        <div class="row">
          <?php $i=0 ; if(get_field( 'featured_projects')): ?>
          <?php while(has_sub_field( 'featured_projects')): $i++; ?>

            <div class="row">
            <?php

            /*
            *  Loop through post objects (assuming this is a multi-select field) ( setup postdata )
            *  Using this method, you can use all the normal WP functions as the $post object is temporarily initialized within the loop
            *  Read more: http://codex.wordpress.org/Template_Tags/get_posts#Reset_after_Postlists_with_offset
            */
            $post_objects = get_field('featured_projects');

            if($post_objects ): ?>
                <ul>
                <?php foreach( $post_objects as $post): // variable must be called $post (IMPORTANT) ?>
                    <?php setup_postdata($post); ?>

                <div class="repeater_row <?php if (($i % 2)==0 ): ?>col-lg-3 col-md-4 col-sm-6<?php else: ?>col-lg-9 col-md-8 col-sm-6<?php endif; ?>">
                  <?php if (($i % 2)==0 ): ?>
                        <li>
                            <h3><?php the_title(); ?></h3>
                            <h3><?php the_field('project_location'); ?></h3>
                            <br>                    
                            <span><?php the_field('project_area'); ?></span><br>                        
                            <span><?php the_field('project_scale'); ?></span><br>
                            <br>
                            <span style="color:#EE1601;"><a href="<?php the_permalink(); ?>">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></span>
                        </li>
                  <?php else: 
                        // check if the post has a Post Thumbnail assigned to it.
                        if ( has_post_thumbnail() ) {
                            the_post_thumbnail();
                        } 
                  ?>
                  <?php endif; ?>
                </div>

                <div class="repeater_row <?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; ?>">
                  <?php if (($i % 2)==0 ): ?>
                  <?php // check if the post has a Post Thumbnail assigned to it.
                        if ( has_post_thumbnail() ) {
                            the_post_thumbnail();
                        } 
                  ?>

                  <?php else: ?>
                        <li>
                            <?php // check if the post has a Post Thumbnail assigned to it.
                                if ( has_post_thumbnail() ) {
                                    the_post_thumbnail();
                                } 
                             ?>

                            <h3><?php the_title(); ?></h3>
                            <h3><?php the_field('project_location'); ?></h3>
                            <br>                    
                            <span><?php the_field('project_area'); ?></span><br>                        
                            <span><?php the_field('project_scale'); ?></span><br>
                            <br>
                            <span style="color:#EE1601;"><a href="<?php the_permalink(); ?>">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></span>
                        </li>
                  <?php endif; ?>
                </div>

                <?php endforeach; ?>

                </ul>

                <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>

            <?php endif;?>
        </div>

          <?php endwhile; ?>

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

我的当前输出如下：

Answer 1

这是将行替换图像和文本的最小逻辑。

<div class="container">
    <div class="row">
        <?php
        for ($i = 1; $i <= 10; $i++)
        {
            //even counter will have right image
            if ($i % 2 == 0)
            {
                ?>
                <div class="col-md-12">
                    <div class="col-md-4">
                        Title Number: <?php echo $i; ?>
                    </div>
                    <div class="col-md-8">
                        <img src="" class="img-responsive"/>
                    </div>
                </div>  
                <?php
            }
            //odd counter will have left image
            else
            {
                ?>
                <div class="col-md-12">
                    <div class="col-md-8">
                        <img src="" class="img-responsive"/>
                    </div>
                    <div class="col-md-4">
                        Title Number: <?php echo $i; ?>
                    </div>
                </div>  
                <?php
            }
        }
        ?>
    </div>
</div>

希望这会给你一个想法。

ACF奇数/偶数交替布局与关系

1 个答案: