Responsive Image cropped

  • Hey there,

    I want to load the cropped version of an image if user has mobile viewport.

    So first i have added this code to deactivated WP image size.

    add_action('init', 'remove_default_image_sizes');
function remove_default_image_sizes() {
    remove_image_size('thumbnail');
    remove_image_size('medium');
    remove_image_size('medium_large');
    remove_image_size('large');
}

    After that i add for my test case following code.

    add_action( 'after_setup_theme', 'wpdocs_theme_setup' );
function wpdocs_theme_setup() {
    add_image_size( 'banner', 2400);
    add_image_size( 'banner-smartphone', 490, 250, true ); // (cropped)
}

    After that i see the original image, the big one and the smart one in my ftp folder.

    But if i check HTML source code i only see the original and the big one. In my img tag.

    Can someone tells me what i have made wrong or can show me a way how to handle it?

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    I believe WP omits available images if the aspect ratio does not match the initially inserted image.

    You can manipulate the srcset and sizes attributes that are added to tags when the content is output through these filters:
    wp_calculate_image_srcset
    wp_calculate_image_sizes

    This will make the cropped images available, but I don’t know if the browser will make use of them. Probably a good chance, but I’m not sure.

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive Image cropped’ is closed to new replies.