0

This is the grid markup that I need to employ (for displaying 5 highlighted posts):

<div id="top-stories" class="row">

  <div class="col-md-5">
    <article><!-- first article content --></article>
  </div>

  <div class="col-md-7">
    <div class="row">

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) article content --></article>
      </div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

      <div class="clearfix visible-sm visible-md visible-lg"></div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

    </div>
  </div>

</div>

As you can see, the markup around each post is different; which means I need to use an if/elseif/else logic to dynamically show posts in this markup.

This is how I am doing it right now (notice that the posts are in a loop):

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); $current_post_count = post_count(); ?>
    <div id="top-stories" class="row">
      <?php if( 0 == $current_post_count ) { ?>

        <div class="col-md-5">
          <article><?php echo $first_article_content; ?></article>
        </div>

      <?php } elseif( 1 == $current_post_count ) { ?>
        <div class="col-md-7">
          <div class="row">

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

      <?php } elseif( 2 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

            <div class="clearfix visible-sm visible-md visible-lg"></div>
      <?php } elseif( 3 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

      <?php } elseif( 4 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

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

The problem is, the code isn't very precise. I couldn't figure out a better logic so far. How can I rewrite the dynamic code to make it more optimal and precise?

its_me
  • 10,998
  • 25
  • 82
  • 130

2 Answers2

2
<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); $current_post_count = post_count(); ?>
    <div id="top-stories" class="row">
      <?php switch($current_post_count ): 
      case 0: ?>
        <div class="col-md-5">
          <article><?php echo $first_article_content; ?></article>
        </div>
      <?php break;?>
      <?php case 1: ?>
        <div class="col-md-7">
          <div class="row">
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
      <?php break;?>
      <?php case 2: ?>
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
            <div class="clearfix visible-sm visible-md visible-lg"></div>
      <?php break;?>
      <?php case 3: ?>
      <?php case 4: ?>
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
      <?php break;?>
      <?php endswitch;?>
          </div>
        </div>
    </div>
  <?php endwhile; ?>
<?php endif; ?>
Patato
  • 1,464
  • 10
  • 12
  • Why use `switch` when the code is along as what I am using now? – its_me Nov 22 '13 at 16:14
  • 1
    Length isn't the only criteria, clarity is important. `switch` makes it clear that every case depends on the same variable, while `if/then/elseif` can perform different tests in each case. – Barmar Nov 22 '13 at 16:17
  • @Barmar Okay, I agree. But the main idea of the question is to know if there's a better logic that I can employ? Something I haven't figured out. – its_me Nov 22 '13 at 16:19
  • @its_me I think the logic is simple enough, but it is important to make it clear – Patato Nov 22 '13 at 16:25
  • I don't think this logic is the same as the OP. In the original code, the extra `` lines are part of case 4, not both 3 and 4. – Barmar Nov 22 '13 at 16:31
  • @Barmar that's right and **switch** can handle some unknown case with a default option – Patato Nov 22 '13 at 16:35
1

I think this combines the common parts of 2,3,4 best:

<?php switch ($current_post_count) {
case 0: ?>
<div class="col-md-5">
    <article><?php echo $first_article_content; ?></article>
</div>

<?php break;
case 1: ?>
<div class="col-md-7">
    <div class="row">

    <div class="col-sm-6 col-md-6">
    <article><?php echo $article_content; ?></article>
</div>

<?php break;
default: ?>
<div class="col-sm-6 col-md-6">
    <article><?php echo $article_content; ?></article>
</div>
<?php switch ($current_post_count) {
    case 2: ?>
    <div class="clearfix visible-sm visible-md visible-lg"></div>
        <?php break;
    case 4: ?>
        </div>
        </div>
        <?php
        }
} ?>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Learnt something today. Thank you very much for [suggesting a better approach](http://stackoverflow.com/questions/20149145/a-simpler-if-elseif-else-logic#comment30032386_20149441) (`switch`) and showing a better logic. – its_me Nov 22 '13 at 17:11