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.

  • Have you tried clearly the cache? – Samuel Asor Jun 22 '17 at 12:40
  • @SamuelAsor Yes, several times. – parisa Jun 22 '17 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. – Jack Johansson Jun 22 '17 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 '17 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. – user3135691 Jun 30 '17 at 14:04
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, privacy policy and cookie policy

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