Search code examples
htmlcsswordpressimageshortcode

Thumbnail Image size not working


I am creating a testimonial plugin where querying the custom posts in a shortcode. I need to create a gallery of the thumbnails where the images will be responsive. Here is the codes first:

add_image_size('rwpt_thumb', 150, 150, true);

 $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'rwpt_thumb' );
      $url = $thumb['0'];
      $idd = get_the_ID();
         $return_string .= '<li class="rwpt_'.$idd.'"><a href=" "><img src="'.$url.'" alt="'.$client.' - '.$client_info.'" /></a></li>';

Where the <li> width is 20% of it's container. so if I get the cropped image size 150*150 px, i set the CSS img width:100%;height:auto; so the image is responsive. But I don't get the the thumbnail 150*150 size.

Any suggestion please?


Solution

  • A number of things could be happening:

    • Your original image is less than 150x150. WordPress will not increase your images beyond their original size.
    • You're trying to retrospectively resize images. If you haven't added this image size before uploading an image then your images won't be resized. If you want to regenerate all your thumbnails there's a plugin for that.
    • You've mentioned that the <li> is 20% of the container. What width is that in pixels? If it's below 150 then there is your problem. If you're using Chrome you can Inspect Element (right-click on the <li>) and it will give you the pixel width, even if it's set as a percentage.

    Also, check what size the thumbnail actually is. If you Inspect Element on the image you should see 2 sizes in the Developer Tools: the size it is on screen and its original size. If the original size is 150x150 then you know it's a styling issue. If it's not then you know it's a WordPress/config issue.