存档页面上的Wordpress if / else语句

Question

For a website I am working on I've tried to do some modifications on a exciting wordpress theme (revera). The original code displayed posts on archive pages with only a thumbnail image and the post title. The following is the original code:

<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    <article class="col-sm-3 col-6 portbox post">
         <?php $thumb = get_post_thumbnail_id();    $img_url = wp_get_attachment_url( $thumb,'full' );     //get full URL to image (use "large" or "medium" if the images too big) $image = aq_resize( $img_url,     750, 500, true ); //resize & crop the image  ?>
         <?php if($image) : ?> <div class="hthumb">         <a href="<?php the_permalink(); ?>"><img     class="img-responsive" src="<?php echo $image ?>"/></a> </div> <?php endif; ?> <h3><a href="<?php     the_permalink(); ?>"> <?php the_title(); ?></a></h3> 
    </article>
<?php endwhile; ?>

Now I have made a if/ else statement in the archive.php (display below) so the archive page of some specific categories shows another code than the above mentioned.

Now, the problem is that the archive is not displaying the original code correctly anymore (archive page). The code if else statement I've made is the following (the error should be in the part after "else"):

<?php
    if ( is_category( 'producten-diensten' )  ) {
        echo'
             the code for producten-diensten category ';

} else {
  //everything else

 while ($wp_query->have_posts()) :
     $wp_query->the_post();
     echo'<article class="col-sm-3 col-6 portbox post">';
     $thumb = get_post_thumbnail_id();
     $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
     $image = aq_resize( $img_url, 750, 500, true ); //resize & crop the image
     if($image) : ;
        echo'<div class="hthumb"><a href="' . the_permalink() . '"><img class="img-responsive" src="' . $image . '"/></a></div>';
     endif;
     echo'<h3><a href="' . the_permalink() . '">' . the_title() . '</a></h3>';
     echo'</article>';
 endwhile;

}?>

The page (http://tinyurl.com/of2xslw) is showing the thumbnail correctly but the url of the single post to which the thumbnail should link is displayed above the thumbnail. The thumbnail links to the archive page instead of the single post page, and the title of the post (with permalink to the single post) is not displaying below the thumbnail. Instead of that, a strange url appears. The page should look like this

What is going wrong here? I hope someone can help me.

Answer 1

This is an easy one:

You shouldn't echo the_permalink() and the_title() as they already echo their respective results:

<?php
    if ( is_category( 'producten-diensten' )  ) {
        echo'
             the code for producten-diensten category ';

} else {
  //everything else

 while ($wp_query->have_posts()) :
     $wp_query->the_post();
     echo'<article class="col-sm-3 col-6 portbox post">';
     $thumb = get_post_thumbnail_id();
     $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
     $image = aq_resize( $img_url, 750, 500, true ); //resize & crop the image
     if($image) : ?>
        <div class="hthumb"><a href="<?php the_permalink(); ?>"><img class="img-responsive" src="<?php echo $image; ?>"/></a></div>';
     <?php endif;?>
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
     <?php echo'</article>';
 endwhile;

}?>

Attention the code might not work because I don't have the library aq_resize and therefore I can't test it properly.