Generate Thumbnails only for Featured Images

Question

I would like to know if there is a simple way (custom code or plugin) to create thumbnail sizes only for images that I intend to use as featured images (index.php, archive.php, etc.) , but not for the images used in the posts (single.php). My main goal is reduce server space usage by not creating thumbnails that my theme will never use.

My thumbnails would actually only have two sizes, 720px wide and 328px wide, and the 720px wide featured images (homepage only) would also have a 328px wide one (for archive.php and sidebar.php)

Currently, the only programmatic way I know is to generate thumbnails for every image upload, which is undesirable, since most of my uploads will be post images and I would have to deleted a lot of images from the server manually.

I would prefer custom code over plugins, but a plugin would be acceptable. I know there are some image resizing plugins out there, but they haven't been update in a longtime (TimThumb, Dynamic Image Resizer).

I have also found a similar question here on Wordpress SE, but the accepted answer doesn't really solve my problem.

---

EDIT: I need to delete or prevent thumbnails for images inside the post, not for featured images, i.e.:

(1) Featured image: additional thumbnails auto-generated by WP are OK.

(2) Images used inside the posts: Upload the original image and do not generate any additional sizes. I will crop, resize and optimize the image before uploading it and one size will fit my needs.

Answer 1

This function will generate an image by temporarily registering an image size, generating the image (if necessary) and the removing the size so new images will not be created in that size.

function lazy_image_size($image_id, $width, $height, $crop) {
    // Temporarily create an image size
    $size_id = 'lazy_' . $width . 'x' .$height . '_' . ((string) $crop);
    add_image_size($size_id, $width, $height, $crop);

    // Get the attachment data
    $meta = wp_get_attachment_metadata($image_id);

    // If the size does not exist
    if(!isset($meta['sizes'][$size_id])) {
        require_once(ABSPATH . 'wp-admin/includes/image.php');

        $file = get_attached_file($image_id);
        $new_meta = wp_generate_attachment_metadata($image_id, $file);

        // Merge the sizes so we don't lose already generated sizes
        $new_meta['sizes'] = array_merge($meta['sizes'], $new_meta['sizes']);

        // Update the meta data
        wp_update_attachment_metadata($image_id, $new_meta);
    }

    // Fetch the sized image
    $sized = wp_get_attachment_image_src($image_id, $size_id);

    // Remove the image size so new images won't be created in this size automatically
    remove_image_size($size_id);
    return $sized;
}

It's "lazy" because images are not generated until they are needed.

In your use-case, you would call that lazy_image_size with the post thumbnail ID to get an image of the desired size. An image would be generated on the first call. Subsequent calls would fetch the existing image.

Gist: https://gist.github.com/mtinsley/be503d90724be73cdda4

Answer 2

You can see this link. there has some example like

add_action( 'after_setup_theme', 'baw_theme_setup' );
function baw_theme_setup() {
  add_image_size( 'category-thumb', 300 ); // 300 pixels wide (and unlimited height)
  add_image_size( 'homepage-thumb', 220, 180, true ); // (cropped)
}

Answer 3

1.Go to Dashboard > Settings > Media
2.Uncheck Crop thumbnail to exact dimensions (normally thumbnails are proportional)
3.Enter 0 for all input (0 for all size)
4.Add these to your functions.php

// Enable support for Post Thumbnails, and declare sizes.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 400, 400, array("center","center") );
function fw_add_image_insert_override($sizes){
    // unset( $sizes['thumbnail']);
    unset( $sizes['small']);
    unset( $sizes['medium']);
    unset( $sizes['large']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'fw_add_image_insert_override' );

5. Make sure that there is no code line in your functions.php start with add_imge_size Note:: I suppose you use size of 400x400 for your thumbnail Now when you upload a photo, it will create only 2 versions instead of at least 4 versions photo as previous.

Answer 4

Hi – I had a similar problem. WooCommerce uses catalogue images for catalogue and related product images. That is not ideal, for you loose either image quality or speed. So I tried to add a fourth image category for my related products. Howdy McGee has solved the problem. Please take a look at Howdy McGees answer:

Modify Related Product Image Sizes: read his code!

It has worked out magnificently for my needs. For your problem the same logic could be applied. Hope this helps.

Regards,

Theo

**Addition: **

I found a solution that works.

Step 1: Assign a new thumbnail size in your functions.php. Check reference: wp codex!

/*add your custom size*/
add_action( 'after_setup_theme', 'your_theme_setup' );
function your_theme_setup() {
add_image_size( 'your-thumb', 123, 123, true );//insert your values
}

Note: 'your-thumb', you will use this variable name later

Step 2: Then add the following code wherever you want to display your featured products:

    <h1>featured products</h1> 
    <div class="woocommerce">
    <ul class= "products">

    <?php
    $args = array( 'post_type' => 'product', 'meta_key' => '_featured','posts_per_page' => 4,'columns' => '4', 'meta_value' => 'yes' );
     $loop = new WP_Query( $args );

     while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                    <li class="product post-<?php echo get_the_ID(); ?>">    
                        <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">

                            <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
                            <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'your-thumb'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="123px" height="123px" />'; ?></a>
                            <h3><?php the_title(); ?></h3><span class="price"><?php echo $product->get_price_html(); ?></span>

                    </li>

    <?php endwhile; ?>
    <?php wp_reset_query(); ?> 
    </ul>
    </div>

Reference and info: (www.haloseeker.com/display-woocommerce-featured-products-without-a-shortcode/)

I placed it in the index.php (my homepage) of wootheme mystyle. Don't forget to use 'your-thumb' on line:

<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'your-thumb'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="123px" height="123px" />'; ?></a>

Step 3: Regenerate thumbnails, use the plugin https://wordpress.org/plugins/regenerate-thumbnails/

Step 4: Refresh the browser and inspect the DOM and compare the values

According to your theme you may change the mark up and class names. I tested the above method and it works well.

The only thing I couldn't do so far, is to add the-add-to-cart-button, because I do not know how to write a variable into the add to cart button shortcode. This is the code:

<?php echo do_shortcode('[add_to_cart id="variable number?"]'); ?>

I hope this helps.

There is certainly a more elegant way to do this. For instance with a function in the functions.php

Regards,

Theo