How to style first post differently and wrap the others in their own container
Question
I need help with styling the first item in the loop differently and wrapping the rest in a container. I have seen a lot of questions that seem related and their various answers but i believe mine is different.
What i currently have:
<div class="dpe-flexible-posts row">
<?php if ( $flexible_posts->have_posts() ): $postCount = 0; while ( $flexible_posts->have_posts()): $postCount++; $flexible_posts->the_post(); global $post;
?>
<?php if($postCount == 1) { ?>
<div <?php post_class('col-8'); ?>>
<div class="dpe-flexible-posts-inner magB30">
<div class="post-thumbnail">
<a href="<?php echo the_permalink(); ?>">
<?php
if ( $thumbnail == true ) {
// If the post has a feature image, show it
if ( has_post_thumbnail() ) {
the_post_thumbnail( $thumbsize );
// Else if the post has a mime type that starts with "image/" then show the image directly.
} else { ?>
<div class="entry-image">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<img src="<?php echo get_stylesheet_directory_uri() . '/inc/assets/img/default-image.png'; ?>" alt="<?php the_title(); ?>" />
</a>
</div>
<?php } ?>
<?php } ?>
</a>
</div>
<div class="dpe-posts-content">
<h3 class="h2"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>
</div>
</div>
<?php } else { ?>
<div <?php post_class('col-4'); ?>>
<div class="dpe-flexible-posts-inner">
<div class="post-thumbnail">
<a href="<?php echo the_permalink(); ?>">
<?php
if ( $thumbnail == true ) {
// If the post has a feature image, show it
if ( has_post_thumbnail() ) {
the_post_thumbnail( $thumbsize );
// Else if the post has a mime type that starts with "image/" then show the image directly.
} else { ?>
<div class="entry-image">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<img src="<?php echo get_stylesheet_directory_uri() . '/inc/assets/img/default-image.png'; ?>" alt="<?php the_title(); ?>" />
</a>
</div>
<?php } ?>
<?php } ?>
</a>
</div>
<div class="dpe-posts-content">
<h3 class="h5"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; ?>
<?php
endif; // End have_posts()
With the above code i can achieve the following:
< div class="row">
< div class="col-12 col-md-8 first-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
</div>
But this is what i need help with achieving:
< div class="first-container">
< div class="first-post">
</div>
</div>
< div class="row second-container">
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
</div>
I want the first post to be wrapped in its own container while the rest are wrapped in a different container so that i can integrate a vertical carousel with swiper-js.
Thanks in advance.
0
1 month
0 Answers
9 views
0
Leave an answer
You must login or register to add a new answer .