0

I am developing a theme using bootstrap, but I am not able to display my posts as I would like.

This is how I wanted it to be: enter image description here

But my best result was that with a eternal loop ....

enter image description here

To differentiate the images in size I use different classes, this is the code I did ...

<div id="blog">

<div class="container">
    <div class="row">

        <div class="col-md-12 text-center titulo-blog">
            <h3 class="page-h3"><?php the_title(); ?></h3>
        </div>
    </div>
</div>
<?php while ( have_posts() ): the_post(); ?>
    <!-- ================================= BIG - SMALL ==================================== -->


    <?php if ( $i % 2 == 0 ): ?>

        <div class="container">
            <div class="row">

                <div class="col-md-4 col-sm-12 imp-blog">
                    <?php query_posts( array(
                        'category_name' => 'imp',
                    ) ); ?>
                    <?php if (have_posts()): the_post(); ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="hoverzoom img-responsive">
                            <?php the_post_thumbnail(); ?>
                            <div class="retina">

                                <div class="ret-text">
                                    <p class="ret-title"><?php the_title(); ?></p>

                                    <p class="ret-sub"><?php the_subtitle(); ?></p>
                                </div>

                            </div>
                        </div>
                    </a>
                    <?php endif; ?>
                </div>
                <div class="col-md-8 col-sm-12 img-blog">

                    <?php query_posts( array(
                        'category_name' => 'img',
                    ) ); ?>
                    <?php if (have_posts()): the_post(); ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="hoverzoom img-responsive">
                            <?php the_post_thumbnail(); ?>
                            <div class="retina">
                                <div class="ret-text">
                                    <p class="ret-title"><?php the_title(); ?></p>

                                    <p class="ret-sub"><?php the_subtitle(); ?></p>
                                </div>
                            </div>
                        </div>
                    </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <?php $i ++; ?>

    <? else: ?>

        <!-- ======================================== SMALL - BIG =====================================-->
        <div class="container">
            <div class="row">


                <div class="col-md-8 col-sm-12 img-blog ">


                    <?php query_posts( array(
                        'category_name' => 'img',
                    ) ); ?>
                    <?php if (have_posts()): the_post(); ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="hoverzoom img-responsive">
                            <?php the_post_thumbnail(); ?>
                            <div class="retina">

                                <div class="ret-text">
                                    <p class="ret-title"><?php the_title(); ?></p>

                                    <p class="ret-sub"><?php the_subtitle(); ?></p>
                                </div>

                            </div>
                        </div>
                    </a>
                    <?php endif; ?>
                </div>
                <div class="col-md-4 col-sm-12 imp-blog">


                    <?php query_posts( array(
                        'category_name' => 'imp',
                    ) ); ?>
                    <?php if (have_posts()): the_post(); ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="hoverzoom img-responsive">
                            <?php the_post_thumbnail(); ?>
                            <div class="retina">
                                <div class="ret-text">
                                    <p class="ret-title"><?php the_title(); ?></p>

                                    <p class="ret-sub"><?php the_subtitle(); ?></p>
                                </div>
                            </div>
                        </div>
                    </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <?php $i ++; ?>

    <?php endif; ?>

<?php endwhile; ?>

Please help me i have no idea how to solve this

closed as off-topic by Michael, cjbj, Dave Romsey, Fayaz, Max Yudin Apr 14 '17 at 9:12

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

1

You don't need any plugins to accomplish this. In fact, this is not really a use case for a masonry layout since the heights of the images are all the same. Masonry.js is for varying post heights. You just need a counter to keep track of alternating rows, and each alternating row put the small column first instead of second. Set a counter to 0 like so:

$i = 0;

Then after each post increment it by one like so:

$i++;

Then you need to use mod to check if it's evenly divisible by 2 (alternate row) or not. If it is, put the small column first instead of second. Check like this:

if($i % 2 == 0) { 

    //...this is an alternate row...
    //...put your markup here...

} else {

    //...this is a regular row...
    //...put your markup here...
}

From the looks of your markup, you might need to modify it so it's all within one loop in order for this to work.

  • Yes, there needs to be one parent loop and the counter/testers inside of it. Set it to 0 before the loop starts initially. – Industrial Themes Apr 10 '17 at 20:00
  • Instead of having two separate loops you should have just one main loop and do the if mod check inside of that. Right now it's not within a loop. – Industrial Themes Apr 11 '17 at 12:53
  • That would require some custom work. I'd have to charge for that level of customization :) – Industrial Themes Apr 12 '17 at 18:37
  • I understand, I have no conditions at the moment, but I thank you for your help so far :) – Vinicius Fioravante Apr 12 '17 at 18:43
  • Can I ask you one last question? The "while" part would have to be changed too? – Vinicius Fioravante Apr 12 '17 at 19:00
-1

I will too suggest you to use Masonry javascript Here is the link to masonry project

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

Run the <div class="grid-item"></div> inside the loop

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