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:

enter image description here

< 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
user13602245 1 month 0 Answers 9 views 0

Leave an answer