0

My home page has a carousel of 'featured (thumbnail) images' from posts. The carousel uses about two=thirds of the screen width and Google Page Speed Analyser complains that my images are too large.

What I would like to insert into my bootstrap carousel code would be something like:

<img src="//localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion.jpg" 
class="attachment-front_page_lg size-front_page_lg wp-post-image" alt="Oysters at A-fusion" 
srcset="//localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-525x270.jpg 525w, //localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-420x320.jpg 420w" 
sizes="66vw" />

I'm not completely sure about the sizes element.

I'm trying to address that by declaring custom image sizes 

/* Image Sizes  
    Large : 525 x 270
    iPhone6 210 * 180   and then 2x that?
*/
add_image_size( "card", 400, 400, false );
add_image_size( "front_page_sm", 420, 360, true );
add_image_size( "front_page_lg", 520, 270, true );

My first problem is that however often I run regenerate thumbnails I do not get these sizes (although I do see images of size 400, which I use elsewhere).

The image regeneration suddenly started working! The following code creates the img tag 

function getFeaturedImage($resto) {
    global $table_prefix;
    global $wpdb;
    $query = "...";
    $queryResult = $wpdb->get_results($query);
    $post_id = $queryResult[0]->post_id;
    return get_the_post_thumbnail($post_id, 'front_page_lg');
}

This does get the $post_id correctly, but results in 

<img width="405" height="270" 
src="//localhost:3000/wp-content/uploads/2016/10/Restaurant-Breda-Amsterdam-1.jpg" 
class="attachment-front_page_lg size-front_page_lg wp-post-image"
alt="restaurant-breda-amsterdam-1" />

This is a real problem as it is using the original (large) version of the image.

However, and in some cases I get

<img width="270" height="270" 
src="//localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion.jpg" 
class="attachment-front_page_lg size-front_page_lg wp-post-image" alt="Oysters at A-fusion" 
srcset="//localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion.jpg 768w, //localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-150x150.jpg 150w, //localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-500x500.jpg 500w, //localhost:3000/wp-content/uploads/2008/03/Oysters-at-A-fusion-400x400.jpg 400w" 
sizes="(max-width: 270px) 100vw, 270px" />

Clearly this srcset is going to be valuable to me and - as far as I know - is being generated by wordpress rather than a plugin. But it only happens for a few posts and with unuseful sizes.

How can I get a src set with my two custom sizes?

Improve this question

1 Answer 1

Reset to default
2

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:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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