0

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.

5
  • Were these images uploaded before the size was registered? I notice the URLs say 2020, but you’re presumably just registering this size now. Jun 25, 2022 at 5:49
  • they are attached to a post that was created in 2020 so they're keeping that date but I did regenerate all thumbs with wp-cli (wp media regenerate) all the same and it's still not loading
    – rudtek
    Jun 25, 2022 at 6:43
  • 1
    Is the original image larger than 250x250? Jun 25, 2022 at 7:20
  • @JacobPeattie you mean the image that was actually uploaded? yes. it was 1507 x 1267.
    – rudtek
    Jun 26, 2022 at 18:43
  • @JacobPeattie looks like it was that there are numbers in the name.
    – rudtek
    Aug 12, 2022 at 18:04

1 Answer 1

0

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.

1
  • 1
    I think it would be ok to use a number if you did not start it with a number (square-250), like css, js, php does not allow a variable to start with a number.
    – zac
    Aug 12, 2022 at 18:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.