1

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

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.org

  • 1
    Thanks man, it does exactly what I need. Also thanks for the documentation reference, will defo go through it and see what else is there. – Go Mo Oct 29 '18 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.