Edit wordpress loop to display thumbnail and excer

Question

I try to realize a wordpress loop to display the articles on my blog. I'm trying to create a design like this: www.freileben.net

My wordpress loop looks like this:

.thumbnail {
  float: left;
  margin-right: 50px;
}
#post {
  margin-top: 120px;
  padding-top: 15px;
}

<article id="post">
  <div id="thumbnail">

    <?php if ( function_exists( 'has_post_thumbnail') && has_post_thumbnail() ) { the_post_thumbnail(array(350,220), array( "class"=>"thumbnail")); } ?>

  </div>

  <h2><?php the_title(); ?></h2>

  <div class="entry">
    <?php the_excerpt(); ?>
  </div>
  <?php endwhile; ?>

</article>

I don't know how to solve the problem because all of the images I use have got a different size and they are not in the same position.

Answer 1

Try this below code :

   <article id="post">
    <?php 
    // the query
    $args = array('');
    $the_query = new WP_Query( $args ); 

    ?>

    <?php if ( $the_query->have_posts() ) { ?>

        <!-- the loop -->

        <?php while ( $the_query->have_posts() ) {
                    $the_query->the_post(); ?>
        <div id="thumbnail">
        <?php
    // Must be inside a loop.

    if ( has_post_thumbnail() ) {
        the_post_thumbnail(array( "class"=>"thumbnail"));
    }
    ?>
    </div>
   <h2><?php the_title(); ?></h2>
   <div class="entry">
        <?php the_excerpt(); ?>
   </div>
    <?php } } else { ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php }  ?>

   <!-- end of the loop -->

   <?php wp_reset_postdata(); ?>