0
I am developing a custom theme using bootstrap and I am not getting at all create a loop to display my posts as I wanted.
I wanted my posts to follow the following order:
However the only result I got (apart from the infinite loops rsrs) was this
here’s how I set up the loop:
<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 $i = 0; ?>
<?php if (($i % 2 == 0) && have_posts()): ?>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 imp-blog">
<?php query_posts(array(
'category_name' => 'imp',
)); ?>
<?php while (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 endwhile; ?>
</div>
<div class="col-md-8 col-sm-12 img-blog">
<?php query_posts(array(
'category_name' => 'img',
)); ?>
<?php while (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 endwhile; ?>
</div>
</div>
</div>
<? else: ?>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 img-blog ">
<?php query_posts(array(
'category_name' => 'img',
)); ?>
<?php while (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 endwhile; ?>
</div>
<div class="col-md-4 col-sm-12 imp-blog">
<?php query_posts(array(
'category_name' => 'imp',
)); ?>
<?php while (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 endwhile; ?>
</div>
</div>
</div>
<?php $i++; ?>
<?php endif; ?>
Obs: I define which images will be the big ones and which ones will be the small ones by the wordpress categories
Obs2: I created an if in which if "i" is even it follows the first order, otherwise it follows the reverse order.
Please help me I have no more idea how to solve this without changing the layout
The problem is not your loop, what you want is not done purely with html and css as far as I know. What you want is to use a javascript library like Masonry: http://masonry.desandro.com/
– Daniel
really not only done with html and css, I would prefer not to use library, wanted if possible only with php.... but when I did it with counters I went into infinite loops.
– Vinicius Fioravante
The problem is that you can’t know the screen size of the guy, right? You can even know what size of your boxes, even so can give shawl.
– Daniel
the images would have a standard height, and with respect to the width the bootstrap would solve.
– Vinicius Fioravante
Friend use Photo Gallery plugin
– Leonardo Carvalho
I did not want to use plugin... I see no need for this
– Vinicius Fioravante