2

I defined a div which is 200px * 200px for my thumbnails using the code below in my index.php file:

<ul> <?php
    $my_query = new WP_Query('showposts=10&cat=3');
    while ($my_query->have_posts()): $my_query->the_post(); $do_not_duplicate = $post->ID;?> 
    <div id="posts">
    <div id="post-thumbnail">
    <?php the_post_thumbnail( 'post-thumbnail'); ?>
    </div>
    <div id="post-content">
    </div>
    <div id="post-tags">
     <li>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
    </div>
    </div>
    <?php endwhile; ?> 
</ul>

And in my functions.php file I have defined the 200px * 200px size for my thumbnail like below:

if (function_exists('add_image_size')){
add_image_size( 'post-thumbnail', 200, 200,true);
}

Up to here, everything is allright but one of my images is not shown correctly; It fits in width but not in height. The actual size of the image is 1920*1080. Besides other images which are 1920*1200, fit correctly both in width and height.

On the other hand, this issue happens only for some images as I have used images frome the same dimentions(1920*1080) and they fit correctly.

I searched a lot to fix this issue but I was unsuccessful, Please help me.

Thanks.

5
  • Have you tried clearly the cache? Jun 22, 2017 at 12:40
  • @SamuelAsor Yes, several times.
    – parisa
    Jun 22, 2017 at 12:41
  • 5
    post-thumbnail is a reserved term. Try defining your own custom size, or update this particular dimension by using set_post_thumbnail_size( 200, 200, true );. Then regenerate the thumbnails and check the results.
    – Johansson
    Jun 22, 2017 at 12:44
  • 4
    When you change image sizes WordPress does not go back and change the existing images by resizing them, you need to re-generate the images with a plugin or it'll only apply to newly uploaded images
    – Tom J Nowell
    Jun 22, 2017 at 13:39
  • 2
    I'm wondering why nobody is complaining about HTML mark-up, which is not correct. A <ul> can only have a <li> as an immediate child. ul > div is not valid HTML. I would fix this issue first. You can nest a <div> in <li>. like so ul > li >div. Jun 30, 2017 at 14:04

1 Answer 1

0

It may be that some of your images were uploaded before you created the custom image size function. If that's the case, a plugin like Force Regenerate Thumbnails will solve your problem.

Alternatively, for more versatility you could use the images as backgrounds, like so:

<div style="background-image: url(<?php the_post_thumbnail_url(); ?>)" id="post-thumbnail"></div>

and set the background size for #post-thumbnail to cover.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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