0

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

newslayout

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>
                    <li><a href="#">Construction of an Objecton</a></li>
                    <li><a href="#">Architectural Blueprints</a></li>
                    <li><a 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;p&gt;</h2>
                <p>Magnam consectetur quia illo rerum aliquam doloremque omnis assumenda quasi enim ex totam provident dignissimos numquam laudantium</p>
                <p><a 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">
                    <p><a 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">
                        <p><a 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">
    <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">
    <?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">
            <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">
            <div class="fh5co-spacer-xs"></div>
            <h3><?php the_title(); ?></h3>
            <p><?php the_excerpt(); ?></p>
            <p><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>
    <?php endif; ?>
<?php endif; ?>

Really hope someone can help me out with this!

0

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; ?>
| improve this answer | |

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.