Target first post in wordpress PHP

Can anybody help i need to add an image to the first post in this loop but can’t figure it out, so i want to go through the loop and only have an image in the first post and just display the rest as normal. Below is the code, cheers

  <div class="trinary-content content ten columns">

    <?php 
              $catObj = get_category_by_slug('news-and-views'); 
              $category_id = $catObj->term_id;

                $args = array(
                    'sort_order' => 'DESC',
                    'sort_column' => 'post_date',
                    'hierarchical' => 0,
                    'exclude' => '',
                    'include' => '',
                    'meta_key' => '',
                    'meta_value' => '',
                    'authors' => '',
                    // 'parent' =>  $post->ID,
                    'category'      => $category_id,
                    'post_type' => 'post',
                    'post_status' => 'publish',
                    'posts_per_page' => 3
                ); 
                $pages = get_posts($args);

    ?>
        <div class="widget widget-newsandviews">
            <h2><?php echo $catObj->name; ?></h2>

            <img class="news-image" src="/wp-content/themes/quentin/images/motorbike-accident/biker-full.png" />
            <div class="items">
            <?php $i = 0; ?>
                <?php foreach($pages as $page): ?>
                    <div class="item <?php if($i)echo 'last'; ?>">
                        <a class="item-title" href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a>
                        <p class="summary"><?php echo $page->post_except; ?></p>
                        <a class="read-more" href="<?php echo get_page_link( $page->ID ); ?>">Find out more &raquo;</a>
                        <div class="clear"></div>
                    </div>
                    <?php $i++; ?>
                <?php endforeach; ?>
            </div>

        </div>

    </div>

Related posts

Leave a Reply

1 comment

  1. Try an if statement, you can move that block to wherever you want in your code. Also you may want to use the_post_thumbnail() to retrieve the image from the post itself

    <?php foreach($pages as $page): ?>
        <?php if ($i==0){ ?> 
            <img class="news-image" src="/wp-content/themes/quentin/images/motorbike-accident/biker-full.png" />
        <?php } ?>
                    <div class="item <?php if($i)echo 'last'; ?>">
                        <a class="item-title" href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a>
                        <p class="summary"><?php echo $page->post_except; ?></p>
                        <a class="read-more" href="<?php echo get_page_link( $page->ID ); ?>">Find out more &raquo;</a>
                        <div class="clear"></div>
                    </div>
                    <?php $i++; ?>
     <?php endforeach; ?>