I'm making this website where i'm displaying things in two colums: on the left, a list of titles, when you click them, it expands a text and on the right it show the corresponding images.
To do so, I use a css grid.
Here is my code that I use to generate my blog posts and display the corresponding images.
My issue there is that .four
is supposed to be on the left, that is correct, and .five
should be on the left, but it's not since .five
is generated under .four
(left). How can I write this correctly so .five
is not a child of .four
and stays a child of my .wrapper
but is keeping the id()
order fine?
<div class="wrapper-top">
<div class="four">
<?php
// the query
$all_posts = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1 ) );
if ( $all_posts->have_posts() ) :
?>
<ul>
<?php while ( $all_posts->have_posts() ) : $all_posts->the_post(); global $post;
?>
<li class='sub-menu'> <a href='#' class="exposition" data-id="<?php the_id();?>"><?php the_title(); ?></a> <ul>
<li><?php the_content(); ?>
<?php the_id();?>
</li>
</ul>
</li>
</ul>
<div class="five">
<?php $images = get_field('gallery');
if( $images ): ?>
<div class="slide-photos" id="<?php the_id();?>" data-id="<?php the_id();?>">
<?php foreach( $images as $image ): ?>
<div class="photos-ind"><img id="<?php the_id();?>" class="slide-photos" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" data-id="<?php the_id();?>"/></div>
<?php endforeach; ?></div>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>
</div>
Thanks a lot.
I'm making this website where i'm displaying things in two colums: on the left, a list of titles, when you click them, it expands a text and on the right it show the corresponding images.
To do so, I use a css grid.
Here is my code that I use to generate my blog posts and display the corresponding images.
My issue there is that .four
is supposed to be on the left, that is correct, and .five
should be on the left, but it's not since .five
is generated under .four
(left). How can I write this correctly so .five
is not a child of .four
and stays a child of my .wrapper
but is keeping the id()
order fine?
<div class="wrapper-top">
<div class="four">
<?php
// the query
$all_posts = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1 ) );
if ( $all_posts->have_posts() ) :
?>
<ul>
<?php while ( $all_posts->have_posts() ) : $all_posts->the_post(); global $post;
?>
<li class='sub-menu'> <a href='#' class="exposition" data-id="<?php the_id();?>"><?php the_title(); ?></a> <ul>
<li><?php the_content(); ?>
<?php the_id();?>
</li>
</ul>
</li>
</ul>
<div class="five">
<?php $images = get_field('gallery');
if( $images ): ?>
<div class="slide-photos" id="<?php the_id();?>" data-id="<?php the_id();?>">
<?php foreach( $images as $image ): ?>
<div class="photos-ind"><img id="<?php the_id();?>" class="slide-photos" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" data-id="<?php the_id();?>"/></div>
<?php endforeach; ?></div>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>
</div>
Thanks a lot.
Share Improve this question edited Jul 21, 2020 at 20:51 mozboz 2,6281 gold badge12 silver badges23 bronze badges asked Jul 21, 2020 at 20:05 pualpual 1136 bronze badges1 Answer
Reset to default 0A simple solution would be just run the loop twice.
<?php // set loop $args here so they're in once place ?>
<div class="four">
<?php // run the loop once with $args, output left side items ?>
</div>
<div class="five">
<?php // run the loop again with $args, output right side items ?>
</div>