0

I've used the following code in my child theme function.php to remove custom image and thumbnail size attributes

function remove_parent_function_img_size_attr() {
  remove_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10, 2);
}
add_action( 'wp_loaded', 'remove_parent_function_img_size_attr' );


function remove_parent_function_thumb_size_attr() {
  remove_filter( 'wp_get_attachment_image_attributes', 'twentysixteen_post_thumbnail_sizes_attr', 10, 3);
}
add_action( 'wp_loaded', 'remove_parent_function_thumb_size_attr' );

It did work but I still have some leftover sizes="(max-width: 600px) 100vw, 600px" when I view source

<img width="600" height="450" src="http://localhost/test/wp-content/uploads/2020/04/portfolio-thumb.jpg"  alt="" srcset="http://localhost/test/wp-content/uploads/2020/04/portfolio-thumb.jpg 600w, http://localhost/test/wp-content/uploads/2020/04/portfolio-thumb-300x225.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /> 

I looked at the parent function and it uses conditional if else statement as follows

    function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
    $width = $size[0];

    if ( 840 <= $width ) {
        $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
    }

    if ( 'page' === get_post_type() ) {
        if ( 840 > $width ) {
            $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
        }
    } else {
        if ( 840 > $width && 600 <= $width ) {
            $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
        } elseif ( 600 > $width ) {
            $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
        }
    }

    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10, 2 );

I am wondering if that conditional still outputs sizes="(max-width: 600px) 100vw, 600px" or is it because the original thumbnail size is 600 x 450 this 'sizes' attribute is still being added?

  • The sizes attribute allows the browser to load smaller versions of the images on smaller screens, saving bandwidth, why are you trying to remove it? – Jacob Peattie Apr 27 at 1:49
  • I am trying to determine if it affects one of the css flexbox rules in my stylesheet as it is not working. the rule is working in my html/css template however not working in wordpress. I did unhook previously all parent css as well... – 810311 Apr 27 at 2:43
  • It shouldn’t be affecting flexbox. – Jacob Peattie Apr 27 at 2:51
  • any suggestion how I can check why its not working? – 810311 Apr 27 at 3:05
  • Pure CSS questions are best asked at stackoverflow.com – Jacob Peattie Apr 27 at 3:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.