How to show 3 most recent/viewed posts in a special tiles on home page using wordpress?

Question

I have these tile elements on the top of my homepage:

    <div class="tile1">
        <div class="tile-textbox" style="color: #22284f;">Just Some Title</div>
    </div>
    <div class="tile2">
        <img class="post-image" src="images/sample-large-2.jpg"/>
        <div class="tile-datebox">
            <img src="images/video-icon.png" >
            <p>2013/2/25</p>
            <div class="tile-info"><h1><a href="index2.html">Title 1</a></h1></div>
        </div>
    </div>
    <div class="tile3">
        <img class="post-image" src="images/sample-mid-2.jpg"/>
        <div class="tile-datebox">
            <img src="images/image-icon.png" >
            <p>2013/5/15</p>
            <div class="tile-info"><h1>Title 2</h1></div>
        </div>
    </div>
    <div class="tile4">
        <img class="post-image" src="images/sample-mid-3.jpg"/>
        <div class="tile-datebox">
            <img src="images/text-icon.png" >
            <p>2013/6/17</p>
            <div class="tile-info"><h1>Title 3</h1></div>
        </div>
    </div>
    <div class="tile5">
        <div class="tile-textbox" style="color: #ffffff;">Another Title</div>
    </div>

</div> <!-- END Tile Holder -->

and I want to show 3 most recent/viewed posts in tile 2, 3 and 4; just the title, date and an image of that post that it gets the url from custom fields that I defined, I tried using :

.
.
.
    <?php query_posts("post_per_page=3"); the_post(); ?>
            <div class="tile2">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
        <div class="tile3">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
        <div class="tile4">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
<?php wp_reset_query(); ?> 
.
.
.

Actually these are just some place to show 3 most recent/viewed post with an image, I mean there will be a list of recent posts beneath them with an excerpt (just for the record).

the problem is that it just gets one post and shows it there, what's wrong? what did I missed? please help, I'm new in the world of wordpress!

Answer 1

First, don't use query_posts(). Just don't:

It should be noted that using this to replace the main query on a page can increase page loading times, in worst case scenarios more than doubling the amount of work needed or more. While easy to use, the function is also prone to confusion and problems later on. See the note further below on caveats for details.

http://codex.wordpress.org/Function_Reference/query_posts (emphasis mine)

And It causes all kinds of havoc with globals on the page that you then have to correct. Use a new WP_Query object.

Second, you don't have a loop, meaning there is nothing in your code that iterates over the query results.

query_posts("post_per_page=3"); the_post(); ?>
  ...
<?php wp_reset_query(); 

The $post variable will be set to the first post returned by the query, but there is nothing in there to loop through to other posts.

$qry = new WP_Query("post_per_page=3");
if ($qry->have_posts()) {
  while ($qry->have_posts) { // this is your loop
    $qry->the_post(); // sets $post to the current post in the Loop ?>
      <div class="tile'.$qry->current_post.'">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
      </div> <?php

  }
} 
wp_reset_postdata();

Untested but that should be very close.

I should add that the code above will duplicate what you appeared to be trying to achieve in your code. However, your title reads "How to show 3 most recent/viewed posts in a special tiles on home page using wordpress?". All that your code does is pull the most recently published posts, not the most recently viewed ones. WordPress does not track page view counts, as far as I know. You will need a plugin or a whole different block of code to do that.