App for Cloudflare® Pro 1.8.9

[TruThemes]

When I choose an image and set it to use srcset, it serves up cropped images from my various sets of cropped images in my custom PHP. It does not use the converted image's varying file sizes as it should.

To remedy this, I guess I would have to change my custom sizes to have a width-only set and not have any cropped images.

Regards,
~ Cory C.

 

[digitalpoint]

I suspect that’s going to be “as design” for WordPress, no? Hard to know exactly what’s going on with your custom PHP, but there’s nothing preventing something (WordPress or something custom) from serving up any of the variations that WordPress generates from your R2 bucket (assuming you are using R2).

 

[TruThemes]

Yep, R2.

For example, I'm using the custom image "medium-width" having a size of 480 x 0, but srcset is using cropped images from other sizes, and anything smaller than that selected image is one of the cropped ones.

This is my script in WP Code Box.

<?php
/** -[ Cory Curtis - 2024-07-04 - For.Life Sites]-
 * -( Remove Thumbs and Default Image Sizes )- *
// -[ ADD CUSTOM IMAGES ]-
// Make sure featured images are enabled
*/
add_theme_support( 'post-thumbnails' );

// Remove These Image Sizes
add_filter( 'intermediate_image_sizes_advanced', function( $sizes ) {
    // Disable specific thumbnail sizes, uncomment the ones you want to disable.

    // unset( $sizes['thumbnail'] ); // 150px x 150px
    unset( $sizes['medium'] ); // 300px x 300px
    // unset( $sizes['medium_large'] ); // 768px x 0px
    unset( $sizes['large'] ); // 1024px x 1024px
    unset( $sizes['1536x1536'] ); // 1536px x 1536px
    unset( $sizes['2048x2048'] ); // 2048px x 2048px
    
    return $sizes;
} );

// -( Add My featured image sizes )-

add_image_size( 'featured-medium', 640, 480, true ); // width, height, crop(true/false)
//add_image_size( 'featured-small', 320, 214, true );
add_image_size( 'hero-big', 1920, 0 ); // Hero BIG
add_image_size( 'slider-featured', 1200, 600, true ); // Large Content Slider

// -( Add other useful image sizes for use through Add Media modal )-

// add_image_size( 'lrg-width', 720, 0 );
add_image_size( 'thumb-full', 150, 0 ); // Set width to 150px, height is auto
add_image_size( 'small-square', 240, 240, true );
add_image_size( 'medium-square', 480, 480, true );
add_image_size( 'medium-width', 480, 0 );
// add_image_size( 'medium-height', 0, 480 );


// Register the image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'truthemes_custom_sizes' );
function truthemes_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'thumb-full' => __( 'Thumb 150xAuto' ),
        'featured-medium' => __( 'Featured Med 640x480' ),
//        'featured-small' => __( 'Featured Small 320x214' ),
        'hero-big' => __( 'Hero Big 1920px' ),
        'slider-featured' => __( 'Slider 1200x600' ),
//        'lrg-width' => __( 'Large Width 720' ),
        'medium-width' => __( 'Medium Width 480' ),
//        'medium-height' => __( 'Medium Height 480' ),
        'medium-square' => __( 'Medium Square 480' ),
        'small-square' => __( 'Small Square 240' ),
    ) );
}

 

[digitalpoint]

I don't know anything about that code or what it's trying to do. Does it work how you want without using R2? This addon doesn't do anything whatsoever as far as keeping different sizes on it's own. All it does is store the images/variations that WordPress generates (it does no generation of any extra sizes on it's own).

 

[TruThemes]

It just generates custom image sizes. All images are going to R2. But if I disable the App for Cloudflare plugin, this stops happening, and srcset gives me the proper images. Is it too late for me to get a refund? I don't know what to do anymore. I've really tried hard to get this all working correctly with this site.

 

[digitalpoint]

Ya, can do a refund, no problem if you want.

FWIW, if that's your code/theme where it's not working, my guess is that when the srcset is being generated, it's not hooking into WordPress's srcset generation filter. Specifically the wp_calculate_image_srcset filter is what WordPress uses to generate srcset URLs. If you use the functions WordPress has built-in for getting attachment srcset, that filter will already be run. For example, wp_get_attachment_image_srcset() is the normal WordPress function that should be called.

Hard to really say definitively what the issue is without seeing all the code, but you definitely should be calling the WordPress native functions for generating srcset URLs, which isn't happening in the code you posted.

 

[TruThemes]

That code only sets image sizes and nothing else. Blocksy is the theme being used with Core Framework and Greenshift for added utility and Gutenberg blocks. There are no image plugins other than yours.

Yeah, let's go with the refund, but I'll definitely keep an eye on your plugin, but not with this combination. I can't afford to spend any more time on this, as I am way, way, way behind already and need to stick with known scenarios for now to get caught up.

Thank you Sir,
- Cory C.

 

[digitalpoint]

That code only sets image sizes and nothing else. Blocksy is the theme being used with Core Framework and Greenshift for added utility and Gutenberg blocks. There are no image plugins other than yours.

Yeah, let's go with the refund, but I'll definitely keep an eye on your plugin, but not with this combination. I can't afford to spend any more time on this, as I am way, way, way behind already and need to stick with known scenarios for now to get caught up.

Thank you Sir,
- Cory C.

Ya, not a whole lot you can do if a third-party theme isn’t using the functions and filters that WordPress core gives it to handle things like srcset properly. 🤷🏻‍♂️

 

[TruThemes]

Except that srcset is working now with the medium-width image after removing Cloudflare. I don't know why that is; it just is.

 

[digitalpoint]

My guess is that it’s doing the same thing with or without and always returning a local srcset. With the difference being that if you are using R2, they aren’t on the local server (the WordPress filter and function I mentioned a few posts prior is what converts a local srcset to a non-local URL). But if the image is local, you don’t *need* to hook into that WordPress filter since there’s nothing that needs to be converted in that case.