the_title() is not displaying over the_thumbnail

the_post_thumbnail() and get_the_post_thumbnail() will output the complete HTML for displaying that image. So this

<img class="img-responsive" src="https://wordpress.stackexchange.com/questions/274181/<?php the_post_thumbnail(); ?>" alt="">

will be rendered to something like this

<img class="img-responsive" src="https://wordpress.stackexchange.com/questions/274181/<img src="..." alt=".." class="..">" alt="">

which is not valid HTML and you can’t really tell how browsers will display this.

Now you have 2 choices: Use this function as it is intended, or get the thumbnail URL via wp_get_attachment_thumb_url() and display it in your custom way.

<div class="img-block">
  Option 1
  <?php the_post_thumbnail(null, 'post-thumbnail', array('class' => 'img-responsive')); ?>

  Option 2
  <?php
  $url = wp_get_attachment_thumb_url( get_post_thumbnail_id() );
  ?>
  <img class="img-responsive" src="https://wordpress.stackexchange.com/questions/274181/<?php echo $url; ?>" alt="">
</div>

As you can see, it is no problem to add additional classes even when using the_post_thumbnail(). Both options are valid ways, though option 1 is usually preferred within WordPress developers, because you’ll get the default HTML markup for images, that everyone is used to and expecting.

Related Posts: