Support Forum
I have defined a custom image size using Code Snippets plugin like this:
add_image_size( 'hero_image', 1280, 853, true );
It appears in the list of available thumbnail sizes:
Have a field group with a Single Image-type of custom field attached to Posts.
For a test post, set a 1920 x 1282 px image as the hero image.
In the Template for single posts, have
<?php
$image = rwmb_meta( 'single_image_gkaiaq9nbl6' );
printf( '<img srcset="%s" src="%s" alt="%s">',
$image['srcset'],
$image['full_url'],
$image['alt'],
);
?>
On the frontend the HTML output is like this:
<img srcset="https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-150x150.jpg 150w,
https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-300x300.jpg 300w,
https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-100x100.jpg 100w"
src="https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629.jpg"
alt="Jay Bird Ornithology Species Fauna - jggrz / Pixabay">
100x100 thumb is being shown on desktop viewport widths and it is obviously blurry.
I am wondering why my custom image size is not being added to srcset.
Thanks in advance.
With the following test code, the HTML output is correct.
<?php $attachment_id = '189';
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
srcset="<?php echo esc_attr( $img_srcset ); ?>"
alt="Foo Bar">
<img src="https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-300x200.jpg"
srcset="https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-300x200.jpg 300w,
https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-1024x682.jpg 1024w, https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-768x512.jpg 768w,
https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629-600x400.jpg 600w,
https://oxygen.local/wp-content/uploads/2021/12/jay-bird-ornithology-species-fauna-6862629.jpg 1280w"
alt="Foo Bar">
Hi Sridhar,
I've looked into the function wp_get_attachment_image_srcset
and found that it generates only for sizes that have the same ratio (source). Your custom size doesn't have the same ratio as the 'thumbnail' size (which is the default size when using with rwmb_meta
), thus WP doesn't return it in the srcset.
Please try another custom size that have the same ratio.