Portfolio thumbnails appear to be not resizing

[bnorsa]

Hi, I 've been a happy user of X for quite some time now and am a big fan.

I have recently been attempting to optimize the site for performance and am currently focusing on the Portfolio page. In the past I had created separate smaller images for the thumbs (500px), however on reading forums it appears that X will automatically resize for me.

I therefore tried setting the feature image on one of my portfolio items as the original image (1200px), however downsizing the image appears not to be working. The portfolio page is https://bennorsaphotography.com/fine-art-photography/, and the image that I am referring to is the first item “Budawangs Australia”.

I would greatly appreciate it if you could advise on how to address this and best practice in general for dealing with image sizing.

Thanks, Ben

[ruenel]

Hello @bnorsa,

Thanks for writing in! Please go to X > Theme Options > Portfolio and enable the “Crop Featured” option.

Hope this helps.

[bnorsa]

Thanks @ruenel, unfortunately this has not worked the image is still coming through as full size. The same is happening when I do tests on the home page (on the thumbnails for the “Recent Posts” at the bottom). https://bennorsaphotography.com

I would greatly appreciate it if you could advise.

Cheers, Ben

[tristup]

Hi Ben,

It seems that the portfolio item images are smaller in a dimension ( width X height ) that is specified for the cropped image for portfolio items, and that is why it does not affect even the cropped option is enabled. For the home page, it loads the fullwidth images as it is using the image as the background image.
I would recommend you try by regenerate the thumbnail once, please go through this article on how to regenerate the thumbnails: https://www.wpbeginner.com/plugins/regenerate-thumbnails-new-image-sizes-wordpress/

Hope it helps.
Thanks

[bnorsa]

Thanks @tristup,

I regenerated the thumbnails as per the article, however this has not fixed the problem. Also I note that none of these regenerated thumbnails are visible in the media library. Is that normal?

In relation to the homepage, I am referring to the blog link thumbnails at the bottom of the page (as opposed to the image at the top). Surely these should be resized to thumbnails?

Cheers

[tristup]

Hi Ben,

Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

If you have any problem sharing the site credentials, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including the details mentioned above.

Thanks

[tristup]

Hi Ben,

There are two types cropped size for the portfolio items, one is entry and another one is entry-fullwidth and it depends on the layout you have chosen for your site. The size of these two is greater than the images you used in the portfolio items, and that is the reason why the images are not cropped. 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:
You can change the size into the following available image sizes:

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

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-fullwidth', NULL );
                } else {
                $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
                }
            } else {
                if ( $fullwidth ) {
                $thumb = get_the_post_thumbnail( NULL, 'thumbnail', NULL ); //changed entry-fullwidth to thumbnail
                } 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 remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[bnorsa]

Thanks @tristup,

Before I try this I would like to clarify a few things:

1. What minimum size do the images in the portfolio need to be for the resizing to work. For example, is it the same size as the site width and therefore if my chosen maximum site width is 1440px, I should size my images as 1440px?
2. I prefer to set it up for X to work natively with minimum additional code and to recut the images at the appropriate size.
3. Can you also clarify whether X will also resize the images for display different devices to ensure optimal performance?
4. Will this code likely solve the issue of resizing thumbnails on the rest rest of the site (such as the home page blog links referred to earlier)? Again, I would prefer that X was doing this natively.

Cheers, Ben

[marc_a]

Hi Ben,

1.) We can’t give you the exact with of your images because it will depends on the size of your layouts
2.) When you upload your images to WordPress Media, it will create a bunch of image dimensions to fit with different devices.
3.) As my colleague said, the code is tested and it should work on your website.

On the other hand, If your concern is about the speed performance of your website, I suggest that you apply Lazy load to your images. Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.

This will help you a lot with speed performance. I recommend that you use the A3 Lazy load plugin.

• https://wordpress.org/plugins/a3-lazy-load/

Hope that helps.

Thank you.

[bnorsa]

Thanks @marc_a,

I have inserted the code into functions.php and this has made no difference to the issue. To demonstrate this I have created a new portfolio page with only one image in it. The source image is 1200px, however it is rendering the image as full sized when testing with a mobile device. Refer https://bennorsaphotography.com/fine-art-photography/nsw-south-coast-australia/

Google pagespeed insights shows the following:

[ruenel]

Hello @bnorsa,

This is the output of the image:

The full-size image is loaded into the page. On smaller screens, it is still being loaded but with the new addition of the scrset() function from WordPress, only the appropriate size is loaded. Please check out this WordPress note:

• https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

Hope this helps.