Archive if/else not displaying correctly

Dear community,

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 (https://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.