wp_get_attachment_image_sizes('large') prints small sizes

Question

I'm using the following code to print out the srcset for my image:

<?php if ( function_exists( 'wp_get_attachment_image_srcset' ) ) :?>
srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_post_thumbnail_id( $blog_results->post->ID, 'medium' ) ) ); ?>"
sizes="<?php  echo esc_attr(wp_get_attachment_image_sizes( get_post_thumbnail_id( $blog_results->post->ID, 'medium' ) ) ); ?>"
<?php endif; ?>

The container that I'm using has 350px width, however WordPress returns this:

sizes="(max-width: 300px) 100vw, 300px"

I would like to enforce somehow to get the next available size because the image quality is really poor. I've been searching for a solution to this up until now but without success.

Is there any clean way I could accomplish this without hard coding "sizes"?

score 1 · Answer 1 · answered Feb 01 '17 at 09:05

you may be try this approach.

First:

//$name = Image size identifier.
//$width = Image width in pixels.
//$height = Image height in pixels.
//$crop =true/false (crop images to specified width and height or resize).
$name = 'custom-size'; $width = '350px'; $height = '200px'; $crop = true;
add_image_size($name, $width, $height, $crop);

check this link https://developer.wordpress.org/reference/functions/add_image_size/. this function write in functions.php file. now you can use this custom size image where you need.

<?php if ( function_exists( 'wp_get_attachment_image_srcset' ) ) :?>
srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_post_thumbnail_id( $blog_results->post->ID, 'custom-size' ) ) ); ?>"
sizes="<?php  echo esc_attr(wp_get_attachment_image_sizes( get_post_thumbnail_id( $blog_results->post->ID, 'custom-size' ) ) ); ?>"
<?php endif; ?>

now you can get your desire image.

Yes, I've tried that but it doesn't seem to work, at least not on my side. — Alex C, Feb 02 '17 at 04:23
Still couldn't find a solution to this problem except for hard-coding the sizes parameter. Did anyone use the above suggestion successfully? If yes, then probably there's something else preventing this in my setup. — Alex C, Feb 09 '17 at 14:38
I have the same problem. Please let us know if you find a solution to this! I'm hardcoding the sizes attribute as well (to gain full control, but obviously this should be automised in a smarter way.). — emilolsson, Jun 04 '17 at 12:33

score 1 · Answer 2 · answered Mar 12 '21 at 18:20

For me this working for custom size:

add_image_size( 'custom_size', 350, 350 ); // here I add custom image size

// https://stackoverflow.com/a/45507581/3829187
function create_responsive_image( $img ) {
    $img_id = attachment_url_to_postid( $img );
    $img_srcset = wp_get_attachment_image_srcset( $img_id );
    $img_sizes = wp_get_attachment_image_sizes( $img_id, 'custom_size' ); // and here I use custom image size
    return '<img src="' . $img . '" srcset="' . esc_attr( $img_srcset ) . '" sizes="' . esc_attr( $img_sizes ) . '">';
}

Or if you don't want to create custom image size you can use other default WP img sizes: 'thumbnail', 'medium', 'large', 'full'. Default is 'medium' 300px

function create_responsive_image( $img ) {
    $img_id = attachment_url_to_postid( $img );
    $img_srcset = wp_get_attachment_image_srcset( $img_id );
    $img_sizes = wp_get_attachment_image_sizes( $img_id, 'full' ); // for full size for example
    return '<img src="' . $img . '" srcset="' . esc_attr( $img_srcset ) . '" sizes="' . esc_attr( $img_sizes ) . '">';
}

score 0 · Answer 3 · edited Nov 29 '20 at 12:21

This question seems to have been there for a while, and I had the same issue even today. I've done some digging and found out this was actually caused by theme's content width. Simply removing or re-setting theme's content width to a desired number will resolve the issue.

<?php
  // Look for the function setting content width, or create a new one in functions.php
  function mytheme_content_width() {
    $GLOBALS['content_width'] = apply_filters( 'mytheme_content_width', 300 ); // Change 300 to a bigger number
  }
  add_action( 'after_setup_theme', 'mytheme_content_width', 0 ); // Or completely remove the action.
?>

wp_get_attachment_image_sizes('large') prints small sizes

3 Answers3