Custom responsive ‘featured image’ sizes

by

First off, I’m not really sure why you need to involve the wpdb class just to create the img tag. If you want to get the featured image, you can use the WordPress functions get_the_post_thumbnail() and the_post_thumbnail()which both allow you to specify the registered size you want, and return the markup like so:

// In the loop:
the_post_thumbnail( 'front_page_lg' ); // echos the markup

// Outside the loop:
$img_markup = get_the_post_thumbnail( $post->ID, 'front_page_lg' );

From there, you have two different hooks to customize that markup:

Here’s an example of using wp_calculate_image_srcset:

function wpse_custom_image_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ){
    $w = 768; // setup a custom width here, repeat below for as many custom widths as you want, linking to your URL
    $sources[$w] = array(
        'url'  => 'myfolder/myimage.jpg',
        'descriptor' => 'w',
        'value'      => $w,
    );
    return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'wpse_custom_image_srcset', 10, 5 );

and here’s an example of using wp_calculate_image_sizes:

function wpse_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
    //Calculate Image Sizes by type and breakpoint
    if ($size === 'front_page_lg') {
        $attr['sizes'] = '(max-width: 768px) 92vw, (max-width: 992px) 450px, (max-width: 1200px) 597px, 730px';
    }  
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpse_post_thumbnail_sizes_attr', 10 , 3 );

This should give you a headstart, but obviously you’ll have to tweak these until you’re getting the markup you’re looking for with your custom image sizes and breakpoints. Here’s some more resources which should help: