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?
A number of things could be happening:
150x150
. WordPress will not increase your images beyond their original size.<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.