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 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.

Answer 1

So after a bit of testing I figured out what was wrong. It's the fact that I used numbers in the custom size name.

Wordpress created the custom image sizes fine when I uploaded images. All custom sizes were in my FTP directories and had an extension of 250x250.

The problem is in calling the new size later. Wordpress was never doing it.

I added a new custom size:

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

I then re-generated image sizes for just one image to test. The new image size was referenced correctly and shows on the front end.

No new images were actually created though. It was still using the -250x250 version of the image.

So in the end, I removed the 250-square media size, then regenerated all images and everything is good and working!

TL;DR: It appears you can't use numbers when creating the name for custom image sizes in wordpress.