Generate Thumbnails only for Featured Images

admin管理员组

文章数量:1386659

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.

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.

• post-thumbnails
• images

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Mar 21, 2015 at 14:18 imrekimrek 31144 silver badges1414 bronze badges 8

• possible duplicate of New image size version only for the Featured Image file – Nicolai Grossherr Commented Mar 21, 2015 at 18:47
• 1 Firstly, it say possible duplicate; secondly, it might help you to solve your problem, because you possibly can make it fit to your needs; last but not least, there is an answer to the »Dynamic Image Resizer« plug-in, although it is a different one. – Nicolai Grossherr Commented Mar 21, 2015 at 19:07
• 2 No time to dive into it, but what you know is the thumbnail id - meta key: _thumbnail_id -, which should be enough actually, save_post and similar hooks could be a way to go. But do not forget that those images in your post could be used in other posts as thumbnail, you might want to have a mechanism to account for that. – Nicolai Grossherr Commented Mar 21, 2015 at 19:20
• 1 Considering what you wrote, you don't mind the additional sizes for the featured image, I was more thinking: If you know which of the attached images the post thumbnail/featured image is, then you can delete the additional image sizes for the others, by excluding the featured image from that process. I mentioned one possible restriction/drawback before. – Nicolai Grossherr Commented Mar 21, 2015 at 19:53
• 1 Suggestion: disable resizing completely via add_filter('intermediate_image_sizes_advanced', '__return_false') and then resize thumbnail on-the-fly with Glide – gmazzap Commented Mar 21, 2015 at 20:52

 |  Show 3 more comments

4 Answers 4

Sorted by: Reset to default 2

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/mtinsley/be503d90724be73cdda4

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)
}

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.

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/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/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

本文标签： Generate Thumbnails only for Featured Images