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 75x75 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-75x75.png
- myimage-250x250.png
- myimage-400x400.png
- myimage-1200x1200.png
- myimage-768x336.png
- myimage-1024x861.png
- myimage-1507x500.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
<a href="<?php the_permalink();?>">
<?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" srcset="https://examplesite.com/wp-content/uploads/2020/10/biglight_36_4587_4314_Taxi_SH.png 450w, https://examplesite.com/wp-content/uploads/2020/10/biglight_36_4587_4314_Taxi_SH-75x75.png 75w" sizes="(max-width: 250px) 100vw, 250px" 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 250x250 nor does it call the 250x250 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.