Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Added HTML output.
Source Link

Perhaps I am misunderstanding (likely) but I am trying to use TwentySixteens method to try and make the images I upload through WordPress responsive.

I have only barely modified the code, but no matter what I try the images do not resize.

Here's what I added to my functions.php:

    function b2f_post_thumbnail_sizes( $attr, $attachment, $size ) {
       if( 'post-thumbnail' === $size ) {
        $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px';
    }
    return $attr; 
} 

add_filter( 'wp_get_attachment_image_attributes', 'b2f_post_thumbnail_sizes', 10, 3 );

I am using:

the_post_thumbnail();

in Index.php to call my image. However it is not being resized.

Any ideas as to why?

EDIT: I've added the HTML output.

<img width="1200" height="800" src="http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1200x800.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1200x800.jpg 1200w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-150x100.jpg 150w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-300x200.jpg 300w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-768x512.jpg 768w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1024x683.jpg 1024w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px">

Perhaps I am misunderstanding (likely) but I am trying to use TwentySixteens method to try and make the images I upload through WordPress responsive.

I have only barely modified the code, but no matter what I try the images do not resize.

Here's what I added to my functions.php:

    function b2f_post_thumbnail_sizes( $attr, $attachment, $size ) {
       if( 'post-thumbnail' === $size ) {
        $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px';
    }
    return $attr; 
} 

add_filter( 'wp_get_attachment_image_attributes', 'b2f_post_thumbnail_sizes', 10, 3 );

I am using:

the_post_thumbnail();

in Index.php to call my image. However it is not being resized.

Any ideas as to why?

Perhaps I am misunderstanding (likely) but I am trying to use TwentySixteens method to try and make the images I upload through WordPress responsive.

I have only barely modified the code, but no matter what I try the images do not resize.

Here's what I added to my functions.php:

    function b2f_post_thumbnail_sizes( $attr, $attachment, $size ) {
       if( 'post-thumbnail' === $size ) {
        $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px';
    }
    return $attr; 
} 

add_filter( 'wp_get_attachment_image_attributes', 'b2f_post_thumbnail_sizes', 10, 3 );

I am using:

the_post_thumbnail();

in Index.php to call my image. However it is not being resized.

Any ideas as to why?

EDIT: I've added the HTML output.

<img width="1200" height="800" src="http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1200x800.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1200x800.jpg 1200w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-150x100.jpg 150w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-300x200.jpg 300w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-768x512.jpg 768w, http://localhost/wordpress/wp-content/uploads/2018/07/audio_mix_cover-1024x683.jpg 1024w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px">
edited tags
Link
Johansson
  • 15.4k
  • 11
  • 43
  • 79
Source Link

Responsive Featured Images Not Working

Perhaps I am misunderstanding (likely) but I am trying to use TwentySixteens method to try and make the images I upload through WordPress responsive.

I have only barely modified the code, but no matter what I try the images do not resize.

Here's what I added to my functions.php:

    function b2f_post_thumbnail_sizes( $attr, $attachment, $size ) {
       if( 'post-thumbnail' === $size ) {
        $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px';
    }
    return $attr; 
} 

add_filter( 'wp_get_attachment_image_attributes', 'b2f_post_thumbnail_sizes', 10, 3 );

I am using:

the_post_thumbnail();

in Index.php to call my image. However it is not being resized.

Any ideas as to why?