[Resolved] Image Sizes Not Working Properly

[stephen]

When selecting the display image size “thumbnail, medium, large, custom” for blog settings, it seems to always use the full size image no matter what selection is made. This isn’t good for page load at all, esp when I just need a small thumbnail for the main page display.

[stephen]

I can’t be the only one with this issue, am I?

[Leo]

Hi there,

Which image(s) are you referring to?

Can you first disabling all plugins so we know there are no caching/lazyload or plugin conflicts?

Let me know 🙂

[stephen]

I created a custom image size using the following code to functions.php:

add_filter( 'generate_blog_image_attributes', function( $atts ) {
    // Set up our conditional
    if ( is_post_type_archive( 'post' ) ) {
        $atts[ 'width' ] = 350;
        $atts[ 'height' ] = 220;
        $atts[ 'crop' ] = true;
    }

    // Return our options
    return $atts;
} );
add_theme_support( 'main-page-thumb' );
 
add_action( 'init', function() {
    add_image_size( 'main-page-thumb', 350, 220, true ); // 350 width, 220 height, crop
} );

I selected “main-page-thumb” from the Admin > Customizing > Layout > Blog > Archiving

I regenerated Thumbs and the main page of RingsideNews.com is still showing the “full” size image instead of the new custom size.

The only time I can get it to change is if I use “Thumbnail”, “Medium”, or “Large” — the default sizes for WordPress.

Default thumbnail size isn’t what we are looking for and the other sizes are way too large.

[stephen]

I did as you asked and it’s still displaying full size image instead of custom file.

[stephen]

With the code above, the custom size is generated but the default blog view on the main page is not calling that size. It only will allow the 3 default wordpress sizes.

[stephen]

Looking thru the forum, it appears that this is an issue that many are facing.

[Tom]

Hi there,

Can you remove this code?:

add_filter( 'generate_blog_image_attributes', function( $atts ) {
    // Set up our conditional
    if ( is_post_type_archive( 'post' ) ) {
        $atts[ 'width' ] = 350;
        $atts[ 'height' ] = 220;
        $atts[ 'crop' ] = true;
    }

    // Return our options
    return $atts;
} );
add_theme_support( 'main-page-thumb' );

Only this should be necessary:

add_action( 'init', function() {
    add_image_size( 'main-page-thumb', 350, 220, true ); // 350 width, 220 height, crop
} );

Then if you’ve regenerated your thumbnails and set the size, it should work as long as you don’t have any other filters overwriting it.

As of right now, this is what I’m seeing on your home page: https://www.screencast.com/t/RV8fLGIGAS

That’s telling me the 350×220 custom-thumb size is working.

Let me know.

[stephen]

I am now seeing what you are seeing, however the problem is it’s still displaying the “full” sized featured image on anything over 800px in screen width.

[stephen]

I changed the code and still having same issue.

[Tom]

I think you’re seeing srcset at work.

You can disable it in WP like this:

add_filter( 'wp_calculate_image_srcset', '__return_false' );

[stephen]

Okay I see. So, different sizes for different screens.

Is it possible to do this on post view for featured image? It’s pulling full size and it would be awesome for it to pull a much smaller photo for post view to help speed up the site.

[Tom]

So adjust which sizes are included in srcset? This article might help: https://www.malthemilthers.com/responsive-images-and-how-to-implement-them-in-wordpress/

[Author]

Posts