Media file variations

Hi Team X - congrats on all the new updates and releases!!
question 1 - is there a date set for when the lifetime special ends?

question 2 - our X site is generating 8 different sized files for any one media file we upload. Can you tell us if any of these are coming from the Theme and if so how to disable them (or find out if the site is using them) The media library is getting logged down with so many files. We did some research and note that the woocommerce size is set to 400 x 600 and all the wordpress media sizes are set to 0 and should not be creating versions. We need some help tracking down where all these variations are coming from please.

Hello @Deesign,

Thanks for writing in!

1.) Our lifetime specials will not end so soon. If there are any changes our pricing and other news, we will let you know.

2.) By default, WordPress will generate 3 sizes respectively the thumbnail, medium size, and the large size if your full or original image is greater than the large size image settings. You can find this setting in Settings > Media. You can check it out here: https://codex.wordpress.org/Post_Thumbnails

Meanwhile, when using the X theme, the theme itself generates another image sizes that would best fit in the theme design. These are the entry, entry-cropped, entry-fullwidth, and entry-cropped-fullwidth.

If you want to remove or modify the following image sizes, please check out this thread:

Hope this helps.

Here’s another piece of the puzzle - I’m not sure how to confirm which of the images we require for the site and store - seems like overkill at the moment. Is there a plugin to confirm which of the “registered images sizes” are required and how to stop wordpress from generating so many?

Maybe more specific questions would help:

  1. With inspector at the front end can I confirm which of these are being used?
  2. I want to see if the sites shop pages are using the woocommerce sizes or the grid sizes - how can we be sure which are being used?
  3. Is woocommerce generating the “woocommerce_thumbnail” and “shop_single” seems like these two sets are doubled up woocommerce_ and shop_ ?

Hey there,

Received a notification since an old thread of mine was linked.

Just wanted to pitch in about the “shop_” and “woocommerce_” image size.

These are both generated by WooCommerce.

WooCommerce currently register both image size names using “ shop_ ” and “ woocommerce_ ” for backward compatibility. The “ shop_ ” prefix is deprecated and will be removed in WC 4.0.

AFAIK there’s no straightforward way to know which image size was used on the front-end other than looking at the URL and dimensions of the picture. Unless of course you have access to the code that renders the image, then you can look what image size is sourced.

Hope this helps!

1 Like

Thank you @thisisbcc - appreciate the heads up.
If “shop_” is depreciated and removed in WC4.0 then we would be safe to remove those 3000 images?

Hey @Deesign,

Yes, it is safe to removed. We suggest that you use Regenerate Thumbnails plugin so that the image sizes will be updated.

Regards.

Thank you @ruenel
One clarification about regenerating images - I was avoiding the Regenerate Thumbnails plugin (we’ve used it before) for fear that this would only create MORE images and the struggle right now is clearing redundant images. Am I correct in that understanding that RT plugin would generate even more images?

I think I found the source of 5 of the versions in The Grid plugin, the sizes in the settings are matching the Test.jpg image above. Can I disable these - I know none of the product images that are displayed in The Grid (because we are using them to display shop products) are squares - how to disable? If you think this is way to remove redundant files moving forward.

Hey @Deesign,

Regenerate Thumbnail plugin will remove the old image sizes and replace it with the new ones. It will ONLY add new image sizes that is declared within WordPress or has been added by the theme or the plugin.

And yes, you can turn that OFF so that when RT regenerates the image sizes, it will no longer include those image sizes.

Hope this helps.

All of our grids are using - Shop catalog size in the Media settings.
The dropdown there includes all the above listed grid sizes but none are being used at all.

If “shop_” is depreciated and removed in WC4.0, would that result in the grids no longer working once we upgrade (which is planned for later today)?

Could you please confirm what the dimensions are for the X generated images you shared earlier:

Meanwhile, when using the X theme, the theme itself generates another image sizes that would best fit in the theme design. These are the entry , entry-cropped , entry-fullwidth , and entry-cropped-fullwidth .

So sorry for my inexperience but nearly through this learning curve :slight_smile:
I uploaded a second test image (1000px x 1000px - a square) and one of the generated images (that’s half the file size of the original) is listed at 1000 x 671. I’m trying to understand why I need to have a long rectangle version of a square image, if this is an X generated image, and how to disable this for our purpose?

Hey @Deesign,

To your question,

I believe so. If it breaks you’d need to update the Images Size Setting to one of the available image sizes.

Yes.

Our theme determines the best balance of image size within the theme’s design. There’s no option to disable the theme’s image sizes for the said reason. If you know how to customize WordPress themes though, you can override that part of our theme. You can learn how to customize our theme here: https://theme.co/docs/best-practices

Just note that we do no provide help for theme customization like issues arising from it, enhancements, etc.

We understand that users wanted more design options though that is why we are currently developing the Layout Builder which will allow users to build their own single and archive templates. That means you’ll be able to use your own image size for the blog post page and single post page. I strongly recommend that you kindly wait for the feature.

Hope that helps and thank you for understanding.

Thank you @christian

You’re most welcome! Please also noted that multiple image sizes doesn’t affect any site’s performance. It only increases the file/disk usage. Wordpress only picks the correct image requested and when just needed based on the called size, it doesn’t load all images of multiple sizes at the same time. Personally, deleting them has no benefit at all, but will only cause issues for features that requires those images.

Thank you @rad - appreciate the advice regarding media library size. The reason for the spring cleaning is that there was over 4gb of images not being used and causing the site backups to take forever, every time we wanted to backup to upgrade this or that and for maintenance - is there a better way?

I’m still curious about the X Theme dimensions for each of the following:

  • entry
  • entry-cropped
  • entry-fullwidth
  • entry-cropped-fullwidth

Could you let us know where to find this info please.

Hello @Deesign,

The image dimensions were defined in the theme itself. Once you upload an image, WordPress will then generated these images sizes. Each of these image sizes will be used with the theme. It is used in the masonry layout, featured image, and other areas in the theme.

If you want to override and get rid of these image sizes, you might be interested in checking out this thread:

Hope this helps.

Thank you @ruenel - I’ll go over that.

What I’m actually after is the dimensions for each of them - can you tell us what the dimensions are for each of the theme generated images? I know the names but I’m after the dimensions of each please.

  • entry
  • entry-cropped
  • entry-fullwidth
  • entry-cropped-fullwidth

Hello @Deesign,

The image dimensions were define in the theme files with the following code:

<?php

// =============================================================================
// FUNCTIONS/GLOBAL/ADMIN/THUMBNAILS/SETUP.PHP
// -----------------------------------------------------------------------------
// Sets up entry thumbnail sizes based on Theme Options.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Add Thumbnail Sizes
//   02. Standard Entry Thumbnail Width
//   03. Fullwidth Entry Thumbnail Width
// =============================================================================

// Add Thumbnail Sizes
// =============================================================================

function x_setup_thumbnails() {

  add_theme_support( 'post-thumbnails' );
  set_post_thumbnail_size( 100, 9999 );

  $width = x_post_thumbnail_width();
  $width_full = x_post_thumbnail_width_full();

  $height_cropped = intval( round( x_post_thumbnail_width() * 0.558823529 ) );
  $height_cropped_full = intval( round( x_post_thumbnail_width_full() * 0.558823529 ) );

  add_image_size( 'entry',                   $width,      9999,                 false );
  add_image_size( 'entry-cropped',           $width,      $height_cropped,      true  );
  add_image_size( 'entry-fullwidth',         $width_full, 9999,                 false );
  add_image_size( 'entry-cropped-fullwidth', $width_full, $height_cropped_full, true  );

}

add_action( 'after_setup_theme', 'x_setup_thumbnails' );



// Standard Entry Thumbnail Width
// =============================================================================

if ( ! function_exists( 'x_post_thumbnail_width' ) ) :
  function x_post_thumbnail_width() {

    // Get Stack
    // ---------

    $stack = x_get_stack();


    // Adjustments
    // -----------
    // 01. Subtract half of the span margin setup by the grid.
    // 02. Subtract due to padding and border around featured image.

    switch ( $stack ) {
      case 'integrity' :
        $m = 2.463055; // 01
        $p = 0;        // 02
        break;
      case 'renew' :
        $m = 3.20197;
        $p = 16;
        break;
      case 'icon' :
        $m = 0;
        $p = 16;
        break;
      case 'ethos' :
        $m = 0;
        $p = 0;
        break;
    }


    // Get Settings
    // ------------

    $a = x_get_option( 'x_layout_site' );
    $b = x_get_option( 'x_layout_content' );
    $c = (float) x_get_option( 'x_layout_site_width' );
    $d = (float) x_get_option( 'x_layout_site_max_width' );
    $e = (float) x_get_option( 'x_layout_content_width' );
    $f = (float) x_get_option( 'x_layout_sidebar_width' );


    // Adjust Settings
    // ---------------

    $site_layout    = ( empty( $a ) ) ? 'full-width'      : $a;
    $content_layout = ( empty( $b ) ) ? 'content-sidebar' : $b;
    $site_width     = ( empty( $c ) ) ? 88 / 100          : $c / 100;
    $site_max_width = ( empty( $d ) ) ? 1200              : $d;
    $content_width  = ( empty( $e ) ) ? 72 - $m           : $e - $m;


    // Calculations
    // ------------

    if ( $content_layout == 'full-width' ) {
      if ( $site_layout == 'full-width' ) {
        $output = $site_max_width - $p;
      } elseif ( $site_layout == 'boxed' ) {
        $output = $site_max_width * $site_width - $p;
      }
    } else {
      if ( $site_layout == 'full-width' ) {
        if ( $stack == 'icon' ) {
          $output = round( $site_max_width - $p );
        } else {
          $output = round( $site_max_width * ( $content_width / 100 ) - $p );
        }
      } elseif ( $site_layout == 'boxed' ) {
        if ( $stack == 'icon' ) {
          $output = round( $site_max_width * $site_width - $p );
        } else {
          $output = round( $site_max_width * ( $content_width / 100 ) * $site_width - $p );
        }
      }
    }


    // Calculations (if Site Max Width < 979px)
    // ----------------------------------------

    if ( $site_layout == 'full-width' ) {
      if ( $site_max_width < 979 * $site_width ) {
        $output = $site_max_width - $p;
      } else {
        if ( $output < ( 979 * $site_width ) ) {
          $output = round( 979 * $site_width - $p );
        }
      }
    } elseif ( $site_layout == 'boxed' ) {
      if ( $site_max_width * $site_width < 979 * $site_width * $site_width ) {
        $output = $site_max_width * $site_width - $p;
      } else {
        if ( $output < ( 979 * $site_width * $site_width ) ) {
          $output = round( 979 * $site_width * $site_width - $p );
        }
      }
    }

    return intval( $output );

  }
endif;



// Fullwidth Entry Thumbnail Width
// =============================================================================

if ( ! function_exists( 'x_post_thumbnail_width_full' ) ) :
  function x_post_thumbnail_width_full() {

    // Get Stack
    // ---------

    $stack = x_get_stack();


    // Adjustments
    // -----------
    // 01. Subtract due to padding and border around featured image.

    switch ( $stack ) {
      case 'integrity' :
        $p = 0; // 01
        break;
      case 'renew' :
        $p = 16;
        break;
      case 'icon' :
        $p = 16;
        break;
      case 'ethos' :
        $p = 0;
        break;
    }


    // Get Settings
    // ------------

    $a = x_get_option( 'x_layout_site' );
    $b = (float) x_get_option( 'x_layout_site_width' );
    $c = (float) x_get_option( 'x_layout_site_max_width' );


    // Adjust Settings
    // ---------------

    $site_layout    = ( empty( $a ) ) ? 'full-width' : $a;
    $site_width     = ( empty( $b ) ) ? 88 / 100     : $b / 100;
    $site_max_width = ( empty( $c ) ) ? 1200         : $c;


    // Calculations
    // ------------

    if ( $site_layout == 'full-width' ) {
      $output = $site_max_width - $p;
    } elseif ( $site_layout == 'boxed' ) {
      $output = $site_max_width * $site_width - $p;
    }

    return intval( $output );

  }
endif;

The dimensions were calculated according to your layout settings depending on your site layout, site max-width, site width, and the sidebar width. These settings can be found in X/Pro > Theme Options > Layout and Design.

Warning: Any modifications to the code above may corrupt or break your site or images.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.