Portfolio loading slow because no thumbnails are created

Hello,
I am using the integrity stack.

2 issues:

First
The portfolio page loads very slow. Upon examination I found out that all shown thumbnails are actually loading the full size image. So, no thumbnails are created.
Fairly new to wordpress, but is this standard behaviour of the Portfolio?
It does not make sense.
If I have 50 items on 1 page then maybe 50 MB or more has to be loaded.
How do I get the portfolio to auto-create the appropriate thumbnails for the portfolio index page.

Second
The sorting option is not working if you have more than 1 page in the portfolio.
Because only the items on the page you are on will be displayed if you sort by category.
That is not what you would want. Choosing a category should show all the images in that category.
Is there a fix for this?

thanks

1 Like

Hey there,

  1. The Portfolio doesn’t use the full sized version. X has a portfolio thumbnail size maxing out to less than 900px in width. You might have template modifications so it uses the full size image? You will also want to optimize your images using a plugin like Short Pixel.

  1. Portfolio items are loaded per your Posts Per Page setting. The filter only filters the current number of items loaded. There’s no fix to this as this is the intended design for performance reasons.

What you’re looking for is AJAX powered filter which is available in The Grid and Essential Grid plugins which come bundled in X. See the links below

https://theme-one.com/docs/the-grid/#!/filter_settings
https://www.themepunch.com/essgrid-doc/category-filters/

Thanks.

Thanks for your reply Christian,

There is nothing in my custom CSS that is causing this,
and as far as I know I did not change the portfolio template at all. At least not the portfolio index page.
Would it be possible you check the site? Maybe I am overlooking something?

I will look into The Grid and Essential Grid, thank you.

1 Like

Looking at the source code, I can see in my site:

img width=“1200” height=“900” src=“http://www.sitebuilder5.nl/wp-content/uploads/2017/06/Kaazaak2-1200x900.jpg” class=“attachment-entry-fullwidth size-entry-fullwidth wp-post-image” alt="" />

While as in your demo-site its:

  • <img width=“862” height=“574” src=“http://demo.theme.co/integrity-1/wp-content/uploads/sites/23/2013/06/texas-shack-862x574.jpg” class="attachment-entry size-entry" alt="" />
  • That seems to be the problem.
    But I did not overwrite any portfolio template files as far as I know.
    Where can I change this : class=“attachment-entry-fullwidth size-entry-fullwidth wp-post-image” ??

    Thanks!

    1 Like

    Hello There,

    Thanks for updating in! The entry or entry-fullwidth will vary depending on the layout of your site. If you use the “fullwidth” layout Global content layout, the entry-fullwidth will be used for featured image. If you have set “Sidebar Left, Content right” or “Content left, Sidebar Right” setting, the entry size will be used. If you want to override it and use other image settings, you can insert the following code in your child theme’s functions.php file:

    if ( ! function_exists( 'x_featured_image' ) ) :
      function x_featured_image( $cropped = '' ) {
    
        $stack     = x_get_stack();
        $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;
    
        if ( has_post_thumbnail() ) {
    
          if ( $cropped == 'cropped' ) {
            if ( $fullwidth ) {
              $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
            } else {
              $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
            }
          } else {
            if ( $fullwidth ) {
              $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
            } else {
              $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
            }
          }
    
          switch ( is_singular() ) {
            case true:
              printf( '<div class="entry-thumb">%s</div>', $thumb );
              break;
            case false:
              printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
                esc_url( get_permalink() ),
                esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
                $thumb
              );
              break;
          }
    
        }
    
      }
    endif;
    

    Please do not forget to change the setting in the above code. You can make use of these image sizes:

    thumbnail
    medium
    large
    full
    entry
    entry-fullwidth
    entry-cropped
    entry-cropped-fullwidth
    

    Hope this helps.

    Thank you, that totally did the trick.
    Would never have found this without you.

    Sorry, reaction a bit too fast.
    If I enter this code in functions.php it does reduce the thumbnail size,
    But when I click (open) a portfolio item, the first (featured) image is now also displayed in the reduced size.
    I only want small thumbnails created on the index page, not on the portfolio details page.

    1 Like

    Hello There,

    Thanks for updating in! If that is the case, then you can make use of this code instead:

    if ( ! function_exists( 'x_featured_image' ) ) :
      function x_featured_image( $cropped = '' ) {
    
        $stack     = x_get_stack();
        $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;
    
        if ( has_post_thumbnail() ) {
    
          if ( $cropped == 'cropped' ) {
            if ( $fullwidth ) {
              $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
            } else {
              $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
            }
          } else {
            if ( $fullwidth ) {
              $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
            } else {
              $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
            }
          }
    
          if ( is_archive() || is_page_template() ) {
            $thumb = get_the_post_thumbnail( NULL, 'medium', NULL );
          }
    
          switch ( is_singular() ) {
            case true:
              printf( '<div class="entry-thumb">%s</div>', $thumb );
              break;
            case false:
              printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
                esc_url( get_permalink() ),
                esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
                $thumb
              );
              break;
          }
    
        }
    
      }
    endif;
    

    In the code above, I added this condition:

    if ( is_archive() || is_page_template() ) {
      $thumb = get_the_post_thumbnail( NULL, 'medium', NULL );
    }
    

    This would mean that the in the page using a page template such as the portfolio or in archive pages, the featured image size will just be medium.

    Hope this helps. Please let us know how it goes.

    Now its working perfectly.
    Awesome support Ruenel, thanks a lot!

    You’re welcome.