How to add Custom Image sizes to X?

[dsthompson]

Hi, I want to add custom image sizes to my site and have followed and article ( https://enviragallery.com/how-to-add-custom-image-sizes-in-wordpress/) adding the custom size to my child functions.php. These images will be displayed within pages.

My Question is regarding step 2

<! – Now that you’ve added your custom image sizes, next it’s time to display those custom image sizes in your theme. Simply edit the theme file where you want to display your custom image sizes, and add the following code:

?
1

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Change ‘your-specified-image-size’ to the name you assigned to your custom image size in the previous step. You’ll need to paste this code inside the post loop of your theme file. -->

Which theme file would I add to the child theme and the code to so that the images are sized within the page?-

Thankyou

[nico]

Hi @dsthompson,

Thanks for writing in.

You could follow the thread below on how to add or remove image sizes.

Change theme featured images and thumbnail sizes

Hope it helps.

Let us know how it goes.

Thanks.

[dsthompson]

Thanks for the reply. I followed and setup the functions per ( https://xthemetips.com/size-matters-the-x-image-guide/730/ ) using my appearace page size settings of 1350px. I must still be missing something in that the following image appears distorted on https://mysalus.org/clean-page. I also played with the width and height settings (although if I understand correctly I shouldn’t set these and let srcset handle the size?)

<img class="wp-inage-55215 alignnone" src="https://mysalus.org/wp-content/uploads/2018/07/Lifescape-min.jpg" alt="MySalus Lifescape Journal" width="100%" height="100%" /> The image is sized width wise for the container at 1000px by 782px

Removing the width and/or height then renders the image at about 50% (need it to fill width of container) but it is showing right aspect ratio and not distorted.

Thoughts on next steps?

Thank you so much for helping me figure this out.

[rad]

Hi @dsthompson,

Your images are served and processed by Page speed. Please disable that first to see the actual image that is served, you can enable it later once we checked the issue.

<img class="wp-inage-55215 alignnone" src="https://mysalus.org/wp-content/uploads/2018/07/xLifescape-min.jpg.pagespeed.ic.ffPRE73qy8.webp" alt="MySalus Lifescape Journal" width="100%" height="100%" data-pagespeed-url-hash="2336409425" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" data-userway-font-size="17">

And shouldn’t make both width and height the same, or it will stretch. It’s either one of these

width: auto;
height: 100%;

width: 100%;
height: auto;

Else, it will stretch your image. Let us know once Pagespeed is disable.

Thanks!

[dsthompson]

Thanks Rad. Page Speed is now disabled and just have width set to 100%. The function I have set in snippets is as follows but the image still stretching? No other caching running.

    function x_disable_wp_image_srcset( $source ) {
  return true;
}

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 767px) 95vw, (max-width: 979px) 80vw, 1350px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

Other thoughts?

Thanks

[rad]

Hi @dsthompson,

I checked and the resolution is much better now, but still stretch. I still see the 100% height

<img class="wp-inage-55215 alignnone" src="https://mysalus.org/wp-content/uploads/2018/07/Lifescape-min.jpg" alt="MySalus Lifescape Journal" width="100%" data-pagespeed-url-hash="2336409425" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" data-userway-font-size="17" height="100%">

Please remove the 100%, then remove this custom CSS.

img {
    max-height: 400px;
} 

That what’s limit your image height and it’s fixed to 400px regardless of your image size.

Thanks!

[dsthompson]

Fantastic Rue! That did the trick!

The X Support Team is second to none!

[Prasant]

Thanks for the good words.