php - IMG src weird behaviour inside a single post loop

I was trying to sort out the final look the featured image of a single post, so for the purpose wanted to add a class to the img tag. However on the way, I run into some weird behaviour while trying to use the_post_thumbnail() function. This is the code that is have and that actually work:

    <?php
if (have_posts()) :
   while (have_posts()) : the_post(); ?>
           <article class="post">

                     <h2 class="postTitle"><?PHP the_title(); ?></h2>
                     <img class="singleMainImg" src="<?php the_post_thumbnail(); ?></img>
                     <p class="postinfo">Created on <?php the_time('F j, Y ')?>  at  <?php the_time('g:i a') ?>. <?php echo getPostViews(get_the_ID()); ?></p>

                     <?php the_content(); ?>
          </article>
          <?php setPostViews(get_the_ID()); ?>
    <?php endwhile;

  else:
    echo '<p> No Content</p>';
  endif;

get_footer();
 ?>

the first weird thing is:

<img class="singleMainImg" src="<?php the_post_thumbnail(); ?></img>

As you can see I dont have the closing double quotes, and neither one more ">" after the closing of the php call.

It does work this way and shows as I almost want(I can manipulate the img by the class I assigned. The problem is its not how the code looks normally without those two closing things in the img tag.

The issue I have when I add the closing double quotes, and > in the image tag, I do get them on the actual page as they are, and as extra, right on the next row after the img.

Also when I try to add some of the pre-defined image sizes in my functions.php file, as paramater inside the

<img class="singleMainImg" src="<?php the_post_thumbnail('predefImageSize'); ?></img>

it doesnt pulls any image at all

Any idea or explanation or solution to why I am having this issues?

Kind Regards

I was trying to sort out the final look the featured image of a single post, so for the purpose wanted to add a class to the img tag. However on the way, I run into some weird behaviour while trying to use the_post_thumbnail() function. This is the code that is have and that actually work:

    <?php
if (have_posts()) :
   while (have_posts()) : the_post(); ?>
           <article class="post">

                     <h2 class="postTitle"><?PHP the_title(); ?></h2>
                     <img class="singleMainImg" src="<?php the_post_thumbnail(); ?></img>
                     <p class="postinfo">Created on <?php the_time('F j, Y ')?>  at  <?php the_time('g:i a') ?>. <?php echo getPostViews(get_the_ID()); ?></p>

                     <?php the_content(); ?>
          </article>
          <?php setPostViews(get_the_ID()); ?>
    <?php endwhile;

  else:
    echo '<p> No Content</p>';
  endif;

get_footer();
 ?>

the first weird thing is:

<img class="singleMainImg" src="<?php the_post_thumbnail(); ?></img>

As you can see I dont have the closing double quotes, and neither one more ">" after the closing of the php call.

It does work this way and shows as I almost want(I can manipulate the img by the class I assigned. The problem is its not how the code looks normally without those two closing things in the img tag.

The issue I have when I add the closing double quotes, and > in the image tag, I do get them on the actual page as they are, and as extra, right on the next row after the img.

Also when I try to add some of the pre-defined image sizes in my functions.php file, as paramater inside the

<img class="singleMainImg" src="<?php the_post_thumbnail('predefImageSize'); ?></img>

it doesnt pulls any image at all

Any idea or explanation or solution to why I am having this issues?

Kind Regards

• php
• images

Share Improve this question asked Oct 26, 2018 at 21:39 Go MoGo Mo 1322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

the_post_thumbnail function display the post thumbnail i.e. <img> tag. You don't need to use <img> tag when using this function.

Try this code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article class="post">
     <h2 class="postTitle"><?PHP the_title(); ?></h2>
     <?php the_post_thumbnail( 'predefImageSize', ['class' => 'singleMainImg', 'title' => 'Feature image'] ); ?>
     <p class="postinfo">Created on <?php the_time('F j, Y ')?>  at  <?php the_time('g:i a') ?>. <?php echo getPostViews(get_the_ID()); ?></p>
     <?php the_content(); ?>
</article>

<?php setPostViews(get_the_ID()); ?>

<?php endwhile;

else: echo '<p> No Content</p>';   endif;

get_footer();

Modified Code:

<?php the_post_thumbnail( 'predefImageSize', ['class' => 'singleMainImg', 'title' => 'Feature Image'] ); ?>

Using the array’s keys and values to populate different attributes. You can use this to add classes to the post thumbnail.

Source: the_post_thumbnail documentation at developer.wordpress