9

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.

  • possible duplicate of New image size version only for the Featured Image file – Nicolai Mar 21 '15 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 Mar 21 '15 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 Mar 21 '15 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 Mar 21 '15 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 Mar 21 '15 at 20:52
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.com/mtinsley/be503d90724be73cdda4

0

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)
}
  • 2
    I need thumbnails only for certain images, not for everything I upload. Basically, when I upload an image I want to control if thumbnails are created or not. – Drunken Master Mar 21 '15 at 17:52
  • but why? is storage space an issue? truly hard to imagine that when there is so much storage space available. – aequalsb May 18 '15 at 16:56
0

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.

0

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

I found a solution that works. 1.step: 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

  1. step: Then add the following code whereever 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 infos: not enought reputation for a third link, sorry (www.haloseeker.com/display-woocommerce-featured-products-without-a-shortcode/) I placed it in the index.php (my homepage) of wootheme mystile. 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>
  1. step: regenerate thumbnails, use the plugin https://wordpress.org/plugins/regenerate-thumbnails/

  2. 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 testet the above method and it works well. The only thing i couldn't do so far is, to add the-add-to-cart-button, for 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

0

to prevent WordPress from making the additional sizes for certain images only, you would have to have a way to indicate that an image you are ABOUT TO upload will be used only for a particular purpose. this must happen BEFORE you uploaded it.

since there is no such interface (out-of-the-box) to indicate such options during an upload action, then you cannot prevent the additional image generation -- unless there was a plugin that added this feature.

but why in the world would you not want the additional image sizes? you never know when you may encounter a situation when you want to use a different size of any image. are you concerned about storage space?

can you not use your own specific size specs like this? the_post_thumbnail( array(100, 100) );

most of the answers and comments i've read here explain how to customize the WordPress environment for image sizes, but none mention doing it conditionally. besides, none of them address the fact you must be able to indicate an image's use before you upload it.

if you are trying to compensate for a too-small image or a too-big image in a post, you can utilize a few things.

  1. CSS: you can add entries to your stylesheet such as .post-entry img { max-width:200px; max-height:300px; }, this is more universal and effective than relying on the size of the image itself -- THAT is a LOT of photoshop time.

  2. Template: you can alter the template file where posts HTML output is being generated and specify an image size like this:

see this documentation at WordPress: https://codex.wordpress.org/Function_Reference/the_post_thumbnail

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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