0

If i have something like this, how should i write the loop? The first section - "img tag" first and then "div .poster-content" The second section - "div .poster-content" first and then "img tag" And so on (the third section will be the same structure like the first section and the fourth section will be the same like the second one AND so on) . That is my template. Is like the first img left and then text right ("div .poster-content"), and the following section text left ("div .poster-content") , img right. Please help ...

   <section class="row-wrap">
     <div class="row-inner">
       <?php

        $args  = array('post_type' => 'music-playlist');
        $query = new WP_Query($args);

       while( $query -> have_posts() ) : $query -> the_post();

    ?>

     <img class="poster" src="<?php echo(types_render_field('artwork', array('raw' => true) )); ?>"> 
     <div class="poster-content">
       <h1><?php echo(types_render_field('playlist-name', array('raw' => true) )); ?></h1>
       <p><?php echo(types_render_field('description', array('raw' => true) )); ?></p>
      </div>

     <?php endwhile; ?>
     </div>
   </section>


   <section class="row-wrap">
    <div class="row-inner">
     <?php

       $args  = array('post_type' => 'music-playlist');
       $query = new WP_Query($args);

    while( $query -> have_posts() ) : $query -> the_post();

    ?>

    <div class="poster-content">
      <h1><?php echo(types_render_field('playlist-name', array('raw' => true) )); ?></h1>
     <p><?php echo(types_render_field('description', array('raw' => true) )); ?></p>
  </div>

     <img class="poster" src="<?php echo(types_render_field('artwork', array('raw' => true) )); ?>"> 

    <?php endwhile; ?>
   </div>
  </section>
0

There may be cleaner ways to do it, but I think this will work:

  <?php
    $args  = array('post_type' => 'music-playlist');
    $query = new WP_Query($args);

    $cntr = 0;

    while( $query -> have_posts() ) : $query -> the_post(); $cntr++; ?>

      <section class="row-wrap">
        <div class="row-inner">

          <?php if ($cntr % 2 == 1) { // first or third items, poster-content first ?>

            <div class="poster-content">
              <h1><?php echo(types_render_field('playlist-name', array('raw' => true) )); ?></h1>
              <p><?php echo(types_render_field('description', array('raw' => true) )); ?></p>
            </div>

            <img class="poster" src="<?php echo(types_render_field('artwork', array('raw' => true) )); ?>"> 

          <?php } else { // second or fourth, img first ?>

            <img class="poster" src="<?php echo(types_render_field('artwork', array('raw' => true) )); ?>"> 

            <div class="poster-content">
              <h1><?php echo(types_render_field('playlist-name', array('raw' => true) )); ?></h1>
              <p><?php echo(types_render_field('description', array('raw' => true) )); ?></p>
            </div>

          <?php } ?>
        </div>
      </section>
    <?php endwhile; 
  ?>

It uses the $cntr variable to track which post it's on, and shows the image or the div depending on its even or odd - if ($cntr % 2 == 1)

  • Can you also show me the cleaner way to do it? Appreciate it. – user81958 Oct 14 '15 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy