## post thumbnails – custom image size not being displayed in loop

Question

I believe I’m missing something on media images.

I have created a custom image size with this code:

add_image_size( '250-square', 250, 250, true); // cropped


I have then uploaded images. When I check in the appropriate uploads directory in my installation I see that the image is uploaded and different sizes have been created.

I have set my thumbnail dimensions to 75×75 hard crop so that there will be 2 different images with a 1:1 ratio if an image is uploaded that is not 1:1 as it is my understanding that’s needed to create a srcsest.

As an example I uploaded an image (myimage.png) with dimensions of 1507 × 1267.

In the directory I have:

• myimage.png
• myimage-75×75.png
• myimage-250×250.png
• myimage-400×400.png
• myimage-1200×1200.png
• myimage-768×336.png
• myimage-1024×861.png
• myimage-1507×500.png

In my loop I’m calling the thumbs with this code:

<div class="product_cat <?php echo \$kidcount;?>"> //just outputs how many children are in the category
<?php the_post_thumbnail('250-square');?>
<h2><?php echo get_the_title();?></h2>
</a>
</div>


However this is what is being generated:

<div class="productCategories grid">
<div class="product_cat 5">
<a href="https://examplesite.com/products/biglight-36-4000-landing-light/">
<img src="https://examplesite.com/wp-content/uploads/2020/10/aeroleds-biglight-4000-landing.png" class="attachment-250-square size-250-square wp-post-image" alt="An image of Aeroleds biglight 4000 Landing" width="250" height="210">
<h2>biglight 36-4000</h2>
</a>
</div>
<div class="product_cat 5">
<a href="https://examplesite.com/products/biglight-36-4000-taxi-light/">
<img src="https://examplesite.com/wp-content/uploads/2020/10/biglight_36_4587_4314_Taxi_SH.png" class="attachment-250-square size-250-square wp-post-image" alt="An image of biglight 36 4587 4314 Taxi Sh" loading="lazy"   width="250" height="250">
<h2>biglight 36-4000</h2>
</a>
</div>
</div>


The first image doesn’t generate a srcset and isn’t loading at 250×250 nor does it call the 250×250 version of the image. the rest of the images (i removed them for simplicity in this question) work as the 2nd image in the output shown here.

0
2 months 2022-06-25T00:31:40-05:00 0 Answers 0 views 0