Hide 2nd image on query

Programming
, , , ,
1

Here is my code:

<?php 
$args = array(
'post_type'  => 'xample',
'posts_per_page' => '4',
);

$the_query = new WP_Query( $args );?>
<?php if( $the_query->have_posts() ): ?>
    <div class="example__container">
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="example__fullscreen fullscreen-example">
            <div class="fullscreen-example__item">
                <h2 class="fullscreen-example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="fullscreen-example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
            </div>
        </div>
    <?php endwhile; ?>
    <div class="example__rows">
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="example__row _active example__row no-showed">
            <h2 class="example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
        </div>
    <?php endwhile; ?>
    </div>
    </div>
<?php endif; ?>
<?php wp_reset_query();   // Restore global post data stomped by the_post(). ?>

I’m trying to display 4 posts from a post type “example” in a WordPress page, with the following layout:

  • The first post displayed in a full-screen element
  • The remaining 3 posts displayed in rows beneath the full-screen element

Here is my code:

<?php 
$args = array(
'post_type'  => 'xample',
'posts_per_page' => '4',
);

$the_query = new WP_Query( $args );?>
<?php if( $the_query->have_posts() ): ?>
    <div class="example__container">
        <div class="example__fullscreen fullscreen-example">
            <div class="fullscreen-example__item">
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <h2 class="fullscreen-example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="fullscreen-example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
                <?php break; ?>
                <?php endwhile; ?>
            </div>
        </div>
        <div class="example__rows">
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <div class="example__row _active example__row no-showed">
                    <h2 class="example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
<?php endif; ?>
<?php wp_reset_query();   // Restore global post data stomped by the_post(). ?>

I’m trying to display four posts from a post type “example” in a WordPress page, with the following layout:

  • The first post displayed in a full-screen element
  • The remaining three posts displayed in rows beneath the full-screen element

Here is my code:

<?php 
$args = array(
'post_type'  => 'xample',
'posts_per_page' => '4',
);

$the_query = new WP_Query( $args );?>
<?php if( $the_query->have_posts() ): ?>
    <div class="example__container">
        <div class="example__fullscreen fullscreen-example">
            <div class="fullscreen-example__item">
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <h2 class="fullscreen-example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="fullscreen-example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
                <?php break; ?>
                <?php endwhile; ?>
            </div>
        </div>
        <div class="example__rows">
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <div class="example__row _active example__row no-showed">
                    <h2 class="example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
<?php endif; ?>
<?php wp_reset_query();   // Restore global post data stomped by the_post(). ?>

I’m trying to display four posts from a post type “example” in a WordPress page with the following layout:

  • The first post displayed in a full-screen element
  • The remaining three posts displayed in rows beneath the full-screen element

Here is my code:

<?php 
$args = array(
'post_type'  => 'xample',
'posts_per_page' => '4',
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) : ?>
    <div class="example__container">
        <div class="example__fullscreen fullscreen-example">
            <div class="fullscreen-example__item">
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <h2 class="fullscreen-example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="fullscreen-example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
                <?php break; ?>
                <?php endwhile; ?>
            </div>
        </div>
        <div class="example__rows">
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <div class="example__row _active example__row no-showed">
                    <h2 class="example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
    <?php wp_reset_query(); ?>
<?php endif; ?>

I’m trying to display four posts from a post type “example” in a WordPress page with the following layout:

  • The first post displayed in a full-screen element
  • The remaining three posts displayed in rows beneath the
2

full-screen element.

Here is the updated code:

<?php 
$args = array(
    'post_type'  => 'example',
    'posts_per_page' => '4',
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) : ?>
    <div class="example__container">
        <div class="example__fullscreen fullscreen-example">
            <div class="fullscreen-example__item">
                <?php $count = 0; ?>
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <?php if ($count == 0) : ?>
                        <h2 class="fullscreen-example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <div class="fullscreen-example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
                    <?php else : ?>
                        <div class="example__row _active example__row no-showed">
                            <h2 class="example__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                            <div class="example__image"><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a></div>
                        </div>
                    <?php endif; ?>
                    <?php $count++; ?>
                <?php endwhile; ?>
            </div>
        </div>
    </div>
    <?php wp_reset_query(); ?>
<?php endif; ?>

This code will display four posts from the “example” post type in a WordPress page. The first post will be displayed in a full-screen element, and the remaining three posts will be displayed in rows beneath the full-screen element.