First post different layout - php

Question

I need to have a different layout for the first post in every page, but don't know where to start. The code is the following:
<?php get_header(); ?>
<div class="row">
<section class="small-12 columns grid-style">
<?php $i = 0; $counter = range(0, 200, 3); ?>
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array('offset'=> 0, 'paged'=>$paged);
$all_posts = new WP_Query($args);
if (have_posts()) : while($all_posts->have_posts()) : $all_posts->the_post();?>
<?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ?
<!--Post -->
<article class="grid-style post" id="post-<?php the_ID(); ?>"
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?></h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
<!--/Post -->
<?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?>
<?php $i++; endwhile; ?>
<div class="small-12 columns">
<?php theme_pagination($all_posts->max_num_pages, 1, true); ?>
</div>
<?php else : ?>
<p><?php _e( 'Please add posts from your WordPress admin page.', THB_THEME_NAME ); ?></p>
<?php endif; ?>
</section>
</div>
<?php get_footer(); ?>
I need to use a different image size, so I need to output everything inside < ! - - Post - - > again for the first post only.

Answer 1

Are you trying to include div.row.journal to the first post?
If it's the case try doing this:
Replace <?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ? by the following: (It'll echo it only on the first page, for the first post)
<?php
if ($all_posts->current_post == 0 && !is_paged()) {
echo '<div class="row journal" data-equal=".post">';
}
?>
Doing the same for the closing div by replacing <?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?> by :
<?php
if ($all_posts->current_post == 0 && !is_paged()) {
echo '</div>';
}
?>

Answer 2

You have to define a counter and ask with if...else... inside the loop
$post_counter = 1;
while (start_loop):
if ($post_counter == 1){
echo "<div id='1'></div>";
else:
echo "<div id='2'></div>";
$post_counter += 1;
//end loop
I think that should help you.

Answer 3

This is the code I have now, I was able to output the HTML for the first post, and a different one for ALL the posts, but I am getting 2 first posts. One using the first layout and the second using the second layout
<?php
/*
Template Name: Blog - Grid Style
*/
?>
<?php get_header(); ?>
<div class="row">
<section class="small-12 columns grid-style">
<?php $i = 0; $counter = range(0, 200, 3); ?>
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array('offset'=> 0, 'paged'=>$paged);
$all_posts = new WP_Query($args);
$post_counter = 0;
if (have_posts()) : while($all_posts->have_posts()) : $all_posts->the_post(); $post_counter++;?>
<?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ?>
<?php if ($post_counter == 1){ ?>
<!--Layout Post 1-->
<div class="row">
<article class="grid-style post small-9 small-centered column" id="post-<?php the_ID(); ?>">
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?>1</h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
</div>
<!--/Layout Post 1-->
<?php } ?>
<!--Other Posts -->
<div class="row">
<article class="grid-style post small-9 small-centered column" id="post-<?php the_ID(); ?>">
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?></h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
</div>
<!--/Other Posts -->
<?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?>
<?php $i++; endwhile; ?>
<div class="small-12 columns">
<?php theme_pagination($all_posts->max_num_pages, 1, true); ?>
</div>
<?php else : ?>
<p><?php _e( 'Please add posts from your WordPress admin page.', THB_THEME_NAME ); ?></p>
<?php endif; ?>
</section>
</div>
<?php get_footer(); ?>