Alternative layout the loop

i'm trying to make an alternative loop as found here on stackexchange, it has been a great help to what i've achieved so far, but i'm stuck now.

The goal is to make the newspage look like this

The dev-website you can find on this address: http://puurluc.xact.be/nieuws/

Big block, three small blocks and then a big block again. However, when i have less then 5 messages on a page the whole layout gets messed up (see page 2 on link above) and i'm a bit stuck on this, so i'm hoping to find some help here :)

I think i could alter the output to col-md-6 or col-md-12 when not enough posts, by working with an if( $wp_query-current_post ... ) but i need to figure out the best way to handle this so that i don't mess up the first page.

Anyway, the code of the index.php 

?php get_header(); ?
section
div class="container"
    div class="row"
        div class="col-md-8" id="fh5co-content"
             ?php 

            if( have_posts() ) {

                while( have_posts() ) {
                    the_post();

                    get_template_part( 'content', 'nieuws' );

                }

                }else{ ?

                    p
                        ?php _e( 'Sorry, no posts matched your criteria.' ); ?
                    /p

                ?php }
            ?
        /div
        div class="col-md-3  col-md-offset-1" id="fh5co-sidebar"

            div class="fh5co-side-section fh5co-nav-links"
                h2 class="fh5co-uppercase-heading-sm"Side Links/h2
                ul
                    li class="active"a href="#"Design is the Creation/a/li
                    lia href="#"Construction of an Objecton/a/li
                    lia href="#"Architectural Blueprints/a/li
                    lia href="#"Circuit Diagrams/a/li
                /ul
            /div
            div class="fh5co-spacer fh5co-spacer-sm"/div
            div class="fh5co-side-section"
                h2 class="fh5co-uppercase-heading-sm"Sweet Little lt;pgt;/h2
                pMagnam consectetur quia illo rerum aliquam doloremque omnis assumenda quasi enim ex totam provident dignissimos numquam laudantium/p
                pa href="#"Go! click me/a/p
            /div
            div class="fh5co-spacer fh5co-spacer-sm"/div
            div class="fh5co-side-section"
                h2 class="fh5co-uppercase-heading-sm"Image Magnific Popup/h2


                div class="fh5co-spacer fh5co-spacer-xxs"/div
                div class="row"
                    div class="col-md-12"
                    pa href="images/project_5.jpg" class="image-popup"img src="images/project_5.jpg" alt="Image" class="img-responsive"/a/p
                    /div

                    div class="col-md-6"
                        pa href="images/project_6.jpg" class="image-popup"img src="images/project_6.jpg" alt="Image" class="img-responsive"/a/p
                    /div
                    div class="col-md-6"
                        a href="images/project_7.jpg" class="image-popup"img src="images/project_7.jpg" alt="Image" class="img-responsive"/a/p
                    /div
                /div
            /div

        /div
    /div
    div class="fh5co-spacer fh5co-spacer-md"/div
    ?php 
                if (function_exists("wp_bs_pagination"))
                    {
                         //wp_bs_pagination($the_query-max_num_pages);
                         wp_bs_pagination();
                }
            ? 
/div  
/section
?php get_footer(); ?

The code of my news template content-nieuws.php 

?php
//echo $wp_query-found_posts;
//var_dump($wp_query);die();
    if( $wp_query-current_post == 0 ) : ?
h2?php the_title(); ?/h2
div class="row"
    div class="col-md-6"
        p?php the_excerpt(); ?/p
    /div
    div class="col-md-6"
        p?php the_excerpt(); ?/p
    /div
    div class="col-md-12"
    pa href="?php the_permalink(); ?" class="btn btn-primary btn-sm"Lees Meer/a/p
    /div
/div
div class="fh5co-spacer fh5co-spacer-sm"/div
?php else : ?
    ?php if($wp_query-current_post == 1) : ?
        div class="row"
    ?php endif; ?
        ?php if($wp_query-current_post == 4) : ?
            h2?php the_title(); ?/h2
                div class="row"
                    div class="col-md-6"
                        p?php the_excerpt(); ?/p
                    /div
                    div class="col-md-6"
                        p?php the_excerpt(); ?/p
                    /div
                    div class="col-md-12"
            pa href="?php the_permalink(); ?" class="btn btn-primary btn-sm"Lees Meer/a/p
            /div
                /div
        ?php else : ?
        div class="col-md-4 col-sm-6"
            div class="fh5co-spacer-xs"/div
            h3?php the_title(); ?/h3
            p?php the_excerpt(); ?/p
            pa href="?php the_permalink(); ?" class="btn btn-primary btn-sm"Lees Meer/a/p
        /div
        ?php endif; ?
    ?php if($wp_query-current_post == 3) : ?
        /div
    ?php endif; ?
?php endif; ?

Really hope someone can help me out with this!

Topic screen-layout loop pagination templates query Wordpress

Category Web

1
answered at

For those interested, i've solved my problem using sizeof($wp-query->posts)

The end-result is this content-news.php template

<?php
//echo sizeof($wp_query->posts);
//var_dump($wp_query);die();

if(sizeof($wp_query->posts) == 4) : ?>
    <?php if( $wp_query->current_post == 0 ) : ?>
        <h3><?php the_title(); ?></h3>
        <div class="row">
            <div class="col-md-12">
                <p><?php the_excerpt(); ?></p>
                <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
            </div>
        </div>
        <div class="fh5co-spacer fh5co-spacer-sm"></div>
    <?php else : ?>
        <?php if($wp_query->current_post == 1) : ?>
            <div class="row row-eq-height">
        <?php endif; ?>
                <div class="col-md-4 col-sm-6">
                    <h3><?php the_title(); ?></h3>
                    <p><?php the_excerpt(); ?></p>
                    <div class="fh5co-spacer-xs"></div>
                    <p class="bottom-align-text"><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
                </div>
        <?php if($wp_query->current_post == 3) : ?>
            </div>
        <?php endif; ?>
    <?php endif; ?>
<?php elseif(sizeof($wp_query->posts) == 3) : ?>
    <?php if( $wp_query->current_post == 0 ) : ?>
        <h3><?php the_title(); ?></h3>
        <div class="row">
            <div class="col-md-12">
                <p><?php the_excerpt(); ?></p>
            <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>

            </div>
        </div>
        <div class="fh5co-spacer fh5co-spacer-sm"></div>
    <?php else : ?>
        <?php if($wp_query->current_post == 1) : ?>
            <div class="row row-eq-height">
        <?php endif; ?>
            <div class="col-md-6 col-sm-6">
                <h3><?php the_title(); ?></h3>
                <p><?php the_excerpt(); ?></p>
                <div class="fh5co-spacer-xs"></div>
                <p class="bottom-align-text"><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
            </div>
        <?php if($wp_query->current_post == 2) : ?>
            </div>
        <?php endif; ?>
    <?php endif; ?>
<?php elseif(sizeof($wp_query->posts) == 1 || sizeof($wp_query->posts) == 2) : ?>
<h3><?php the_title(); ?></h3>
<div class="row">
    <div class="col-md-12">
        <p><?php the_excerpt(); ?></p>
        <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
    </div>
</div>
<div class="fh5co-spacer fh5co-spacer-sm"></div>
<?php else : ?>
<?php if( $wp_query->current_post == 0 ) : ?>
<h3><?php the_title(); ?></h3>
<div class="row">
    <div class="col-md-12">
        <p><?php the_excerpt(); ?></p>
        <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
    </div>
</div>
<div class="fh5co-spacer fh5co-spacer-sm"></div>
<?php else : ?>
    <?php if($wp_query->current_post == 1) : ?>
        <div class="row row-eq-height">
    <?php endif; ?>
        <?php if($wp_query->current_post == 4) : ?>
            <h3><?php the_title(); ?></h3>
                <div class="row">
                    <div class="col-md-12">
                        <p><?php the_excerpt(); ?></p>
                        <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
                    </div>
                </div>
        <?php else : ?>
        <div class="col-md-4 col-sm-6">
            <h3><?php the_title(); ?></h3>
            <p><?php the_excerpt(); ?></p>
            <div class="fh5co-spacer-xs"></div>
            <p class="bottom-align-text"><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
        </div>
        <?php endif; ?>
    <?php if($wp_query->current_post == 3) : ?>
        </div>
        <div class="fh5co-spacer fh5co-spacer-sm"></div>
    <?php endif; ?>
<?php endif; ?>
<?php endif; ?>

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.