How to count posts posts if they are in a separate content page?

Question

I am using a content page to render elements from my "Loop", I would like to count the post to get my current position as this would determine the size of the card I display. My (html, css cards you can see the bootstrap cards to understand what I mean) cards have variable width, with the first, second and third cards taking the majority of the space.

My code is below (for content.php):

    <?php if ($count == 0) { ?>
      <div class="row bg-white banner">
       <div class="col col-sm-8 remove-left-margin">
          <img src="./img/banner.png" class="banner-article-image" />
       </div>
       <div class="col-sm-4">
          <div><p class="banner-article-topic"><?php the_category(); ?></p></div>
          <div><h2 class="banner-article-title"><b><?php the_title(); ?></b></h2></div>
          <div><p class="banner-article-par"><?php the_content(); ?></p></div>
          <div><p class="banner-article-date"><?php the_date(); ?></p></div>
       </div>
     </div>
   <?php } ?>

   <?php if ($count > 2) { ?>
    <div class="row">
    <?php if ($count % 2 != 0) { ?>
        <div class="col col-sm-6 custom-margin">
            <div class="left-card-article">
                <div class="row">
                    <img src="./img/sample-3.jpg" class="img-responsive card-article-image" />
                </div>

                <div class="row card-article-body">
                    <div><p class="left-article-topic"><?php the_category(); ?></p></div>
                    <div><h4 class="left-article-title"><b><?php the_title(); ?></b></h4></div>
                    <div><p class="left-article-date"><?php the_date(); ?></p></div>
                </div>
            </div>
        </div>
    <?php } ?>

    <?php if ($count % 2 == 0) { ?>
          <div class="col col-sm-6 custom-margin">
            <div class="right-card-article">
                <div class="row">
                    <img src="./img/sample-4.jpg" class="img-responsive card-article-image" />
                </div>

                <div class="row card-article-body">
                    <div><p class="right-article-topic"><?php the_category(); ?></p></div>
                    <div><h4 class="right-article-title"><b><?php the_title(); ?></b></h4></div>
                    <div><p class="right-article-date"><?php the_date(); ?></p></div>
                </div>
            </div>
        </div>
      <?php } ?>
    </div>
<?php } ?>

This is a sample of my content.php, how can I pass the $count variable from index.php which is shown below (only the loop):

<div class="container body-margin" style="margin-top: 8em;">
<?php
    $count = 0;
    if ( have_posts() ) : while ( have_posts() ) : the_post();
      get_template_part( 'content', get_post_format() );
      $count++;
    endwhile; endif;
?>
</div>

Would appreciate any help, thank you.

Answer 1

The simplest solution (as in requiring the least work) would be to just make $count a global variable.

So in index.php you'd have:

global $post;
$count = 0;

And in content.php you'd just need to use $global $post; to access it:

<?php
global $post;

if ($count == 0) { ?>

However, I think this is the wrong approach. Your situation is that you effectively have 3 different templates and you want to choose which to display based on the current post count. The current post count is irrelevant to the individual templates. It's something that should be determined in the loop.

So what I'd suggest is creating 3 different template files for each type of card. Then inside index.php choose which to display based on the current number. This way you don't need to pass variables between templates.

So index.php would look like this:

$count = 0;

if ( have_posts() ) : while ( have_posts() ) : the_post();
    if ( $count == 0 ) {
        get_template_part( 'content', 'banner' );
    } 

    if ( $count > 2 ) {
        echo '<div class="row">';

        if ( $count % 2 != 0 ) {
            get_template_part( 'content', 'left-card' );
        } else if ( $count % 2 == 0 ) {
            get_template_part( 'content', 'right-card' );
        }

        echo '</div>';
    }

    $count++;
endwhile; endif;

Then you would split content.php into content-banner.php, content-left-card.php, and content-right-card.php with the template for each type of card.

PS: I just copied your if statements for $count, but it looks to me like this loop would not output anything at all for the 2nd & 3rd posts. I'm not sure if that's intentional, but if it isn't, $count > 2 should probably be $count > 0.