Serve scaled images in posts slider's thumbnail

Question

My WordPress theme has a part called "Posts slider" and I want to use it in my homepage and I want to display 8 posts in it. I'm not fully run my site and want to improve its speed. when analyze with GTMetrix my site: http://www.tamtaragh.com it has some problems but one of them is about this post slider which uses 600x450 images instead 200x150 as thumbnails so for each thumbnail it loads extra 50KB in average! In media settings the medium size is 300x400! here is the code of posts slider:

$output = $title = $type = $count = $interval = $slides_content = $link = '';
$custom_links = $thumb_size = $posttypes = $posts_in = $categories = '';
$orderby = $order = $el_class = $link_image_start = '';
extract(shortcode_atts(array(
    'title' => '',
    'type' => 'flexslider_fade',
    'count' => 3,
    'interval' => 3,
    'slides_content' => '',
    'slides_title' => '',
    'link' => 'link_post',
    'custom_links' => site_url().'/',
    'thumb_size' => 'medium',
    'posttypes' => '',
    'posts_in' => '',
    'categories' => '',
    'orderby' => NULL,
    'order' => 'DESC',
    'el_class' => ''
), $atts));

$gal_images = '';
$link_start = '';
$link_end = '';
$el_start = '';
$el_end = '';
$slides_wrap_start = '';
$slides_wrap_end = '';

$el_class = $this->getExtraClass($el_class);

if ( $type == 'nivo' ) {
    $type = ' wpb_slider_nivo theme-default';
    wp_enqueue_script( 'nivo-slider' );
    wp_enqueue_style( 'nivo-slider-css' );
    wp_enqueue_style( 'nivo-slider-theme' );

    $slides_wrap_start = '<div class="nivoSlider">';
    $slides_wrap_end = '</div>';
} else if ( $type == 'flexslider' || $type == 'flexslider_fade' || $type == 'flexslider_slide' || $type == 'fading' ) {
    $el_start = '<li>';
    $el_end = '</li>';
    $slides_wrap_start = '<ul class="slides">';
    $slides_wrap_end = '</ul>';
    wp_enqueue_style('flexslider');
    wp_enqueue_script('flexslider');
}
$flex_fx = '';
if ( $type == 'flexslider' || $type == 'flexslider_fade' || $type == 'fading' ) {
    $type = ' wpb_flexslider flexslider_fade flexslider';
    $flex_fx = ' data-flex_fx="fade"';
} else if ( $type == 'flexslider_slide' ) {
    $type = ' wpb_flexslider flexslider_slide flexslider';
    $flex_fx = ' data-flex_fx="slide"';
}

if ( $link == 'link_image' ) {
    wp_enqueue_script( 'prettyphoto' );
    wp_enqueue_style( 'prettyphoto' );
}

$query_args = array();

//exclude current post/page from query
if ( $posts_in == '' ) {
    global $post;
    $query_args['post__not_in'] = array($post->ID);
}
else if ( $posts_in != '' ) {
    $query_args['post__in'] = explode(",", $posts_in);
}

// Post teasers count
if ( $count != '' && !is_numeric($count) ) $count = -1;
if ( $count != '' && is_numeric($count) ) $query_args['posts_per_page'] = $count;

// Post types
$pt = array();
if ( $posttypes != '' ) {
    $posttypes = explode(",", $posttypes);
    foreach ( $posttypes as $post_type ) {
        array_push($pt, $post_type);
    }
    $query_args['post_type'] = $pt;
}

// Narrow by categories
if ( $categories != '' ) {
    $categories = explode(",", $categories);
    $gc = array();
    foreach ( $categories as $grid_cat ) {
        array_push($gc, $grid_cat);
    }
    $gc = implode(",", $gc);
    $query_args['category_name'] = $gc;

    $taxonomies = get_taxonomies('', 'object');
    $query_args['tax_query'] = array('relation' => 'OR');
    foreach ( $taxonomies as $t ) {
        if ( in_array($t->object_type[0], $pt) ) {
            $query_args['tax_query'][] = array(
                'taxonomy' => $t->name,//$t->name,//'portfolio_category',
                'terms' => $categories,
                'field' => 'slug',
            );
        }
    }
}

// Order posts
if ( $orderby != NULL ) {
    $query_args['orderby'] = $orderby;
}
$query_args['order'] = $order;

// Run query
$my_query = new WP_Query($query_args);

$pretty_rel_random = 'rel-'.rand();
if ( $link == 'custom_link' ) { $custom_links = explode( ',', $custom_links); }
$teasers = '';
$i = -1;

while ( $my_query->have_posts() ) {
    $i++;
    $my_query->the_post();
    $post_title = the_title("", "", false);
    $post_id = $my_query->post->ID;
    if ( $slides_content == 'teaser' ) {
        $content = do_shortcode(apply_filters('the_excerpt', get_the_excerpt()));//get_the_excerpt();
    } else {
        $content = '';
    }
    $thumbnail = '';

    // Thumbnail logic
    $post_thumbnail = $p_img_large = '';

    $post_thumbnail = wpb_getImageBySize(array( 'post_id' => $post_id, 'thumb_size' => $thumb_size ));
    $thumbnail = $post_thumbnail['thumbnail'];
    $p_img_large = $post_thumbnail['p_img_large'];

    // Link logic
    if ( $link != 'link_no' ) {
        if ( $link == 'link_post' ) {
            $link_image_start = '<a class="link_image" href="'.get_permalink($post_id).'" title="'.sprintf( esc_attr__( 'Permalink to %s', 'js_composer' ), the_title_attribute( 'echo=0' ) ).'">';
        }
        else if ( $link == 'link_image' ) {
            $p_video = get_post_meta($post_id, "_p_video", true);
            //
            if ( $p_video != "" ) {
                $p_link = $p_video;
            } else {
                $p_link = $p_img_large[0]; // TODO!!!
            }
            $link_image_start = '<a class="link_image prettyphoto" href="'.$p_link.'" title="'.the_title_attribute('echo=0').'" >';
        }
        else if ( $link == 'custom_link' ) {
            if (isset($custom_links[$i])) {
                $slide_custom_link = $custom_links[$i];
            } else {
                $slide_custom_link = $custom_links[0];
            }
            $link_image_start = '<a class="link_image" href="'.$slide_custom_link.'">';
        }

        $link_image_end = '</a>';
    } else {
        $link_image_start = '';
        $link_image_end = '';
    }

    $description = '';
    if ( $slides_content != '' && $content != '' && ( $type == ' wpb_flexslider flexslider_fade flexslider' || $type == ' wpb_flexslider flexslider_slide flexslider' ) ) {
        $description = '<div class="flex-caption">';
        if ($slides_title==true) $description .= '<h5 class="post-title">' . $link_image_start . $post_title . $link_image_end .'</h5>';
        $description .= $content;
        $description .= '</div>';
    }

    $teasers .= $el_start . $link_image_start . $thumbnail . $link_image_end . $description . $el_end;
} // endwhile loop
wp_reset_query();

if ( $teasers ) { $teasers = $slides_wrap_start. $teasers . $slides_wrap_end; }
else { $teasers = __("Nothing found." , "js_composer"); }

$css_class =  apply_filters(VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, 'wpb_gallery wpb_posts_slider wpb_content_element'.$el_class, $this->settings['base']);

$output .= "\n\t".'<div class="'.$css_class.'">';
$output .= "\n\t\t".'<div class="wpb_wrapper">';
$output .= wpb_widget_title(array('title' => $title, 'extraclass' => 'wpb_posts_slider_heading'));
$output .= '<div class="wpb_gallery_slides'.$type.'" data-interval="'.$interval.'"'.$flex_fx.'>'.$teasers.'</div>';
$output .= "\n\t\t".'</div> '.$this->endBlockComment('.wpb_wrapper');
$output .= "\n\t".'</div> '.$this->endBlockComment('.wpb_gallery');

echo $output;

I'm not so familiar to coding but think it recalls the medium size for thumbnail, am I right? I changed that 'medium' to 'thumbnail' or 'thumb' but nothing changed in gtmetrix. There are also other image sizes defined in my functions.php but replacing each of them causes any changes. Is there anything else that must be changed to call a 200x150 image? any help would appreciated.

Answer 1

I guess you should localize in your theme add_image_size function and check which name is associated to the size you are interested in.

It should look somewhat like:

add_image_size( 'thumbnail-name', 200, 150, true );

In case it isn't defined yet you can add it in this way:

add_action( 'after_setup_theme', 'custom_theme_setup' );
function custom_theme_setup() {
    add_image_size( 'thumbnail-name', 200, 150, true );
}

You can read more about this topic here.