0

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">
  • WordPress already outputs the srcset attribute, which is used to handle the responsiveness. Can you add the HTML output of one of your images to your question? – Jack Johansson Aug 11 '18 at 1:48
  • @JackJohansson I've added the HTML output. – Brian Aug 11 '18 at 2:05
  • The responsiveness works fine in your HTML output, the srcset attribute is set and should make your image responsive. Whenever needed, the browser will load an image from the srcset, instead of src. – Jack Johansson Aug 11 '18 at 4:10
  • Right but in actual execution it does not. When I resize the browser, or I use the developer tools to simulate a mobile device the image stays the same size. In the TwentySixteen/Seventeen theme they actually resize. – Brian Aug 11 '18 at 13:31
0

It seems I forgot one crucial aspect: to edit the CSS of the img element.

I set my img to:

 img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

That fixed the issue with regards to the images not being responsive.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.