[Support request] Thumbnail different size and regenrate thumbnail not working

[Sangita]

I tried using regenrate thumbnail plugin as well but didnt work. Different size thumbnails are generated. How can i fix this

[David]

Hi there,

the marketer site uses this CSS in Customizer > Additional CSS to fix the images to 300px wide on Desktop:

@media (min-width: 769px) {
	.post-image-aligned-left .post-image img {
		max-width: 300px;
	}
}

If you remove that, then you can use the Featured Image sizes in the Customizer > Layout > Blog to resize them.

[epickenyan]

How about for default theme? The images in blocks are not aligned despite setting (width and) height.

[David]

The standard theme respects the thumbnail sizes you set. The issue you are probably having is that the images are a different aspect ratio. Some are landscape and some are portrait. It is only the smallest thumbnail which defaults to 150px square will resize your images to all being square.

Its best to use images of the same sizes.

[epickenyan]

All my images are landscape and beyond 640px. I am getting an error in gtmetrix that two images in my homepage are being resized via CSS. In fact, I am getting multiple instances of “serve scaled images” across the site (categories, tags, etc). I used the wp show posts plugin before going premium and never encountered these issues. (Images are also optimized with wp smush)

None of the options in this forum worked for me. I had to edit all the images manually.

[David]

As i mentioned before that CSS is resizing the images to fit. If you remove that CSS and use the featured image size in the blog settings it will output them at the correct size.

[epickenyan]

Where is the CSS in the default theme? I had to resize every image of mine to 640px for the errors to go away.

[David]

There is no default CSS for image sizes within the post content.
The above CSS is in them Customzier > Additional CSS and was added by the Marketer Site install.

WP uses SRCSET images and will display the most appropriate sized image for its container.

The only size changing GP does is as i mentioned in the Blog > Featured Image size settings. This uses server side scripts to resize the image on the fly.

[epickenyan]

Okay. Then it seems that function failed on my site coz I changed every image that had over 1000px and also aligned the image height on columns with custom css. That means also in stretched containers I have to expand the image width in posts using CSS (to about 900px) which makes some of the images pixelated. But I can work with the image sizes I made for now. Thanks anyway.

[David]

SrcSet images should apply automatically to the images within the post. To note your post content width ( ie. width of the text after padding ) is 668px, so unless you intend to use them on full width pages or in a header element they don’t need to be any wider than 668px.

If you change any of those image sizes in WP you need to re-run the regenerate thumbnails for them to update.

[Sangita]

When i remove

@media (min-width: 769px) {
.post-image-aligned-left .post-image img {
max-width: 300px;
}

The thumnails are too big.

I want 300 or less pixel thumbnails nicely generated on left as they appear now or in default theme. But all thumbnail of same size

[David]

Remove the CSS for now.
And then go to Customizer > Layout > Blog –> Featured Images –> Archive Tab and set your image sizes there.

[epickenyan]

@david. When the container is stretched (e.g to 1600px) the content width also stretches meaning the image won’t fit. That is why I had some images at 1000+ px coz they leave white space on the right.

[David]

Its is best to upload an original image at the maximum width you require them. Generally the largest size i use is between 1600px and 2400px. This is for full width featured images used in a Header Element.
The Thumbnail sizes i then set to suit the different requirements. Which could include : container without sidebars, container with sidebars, images within columns.

For columns i generally like to keep them the width of a mobile device where they will display in a single column.

SRCSET will automatically apply the various thumbnail sizes or the original image size that you place in your content.

The Blog Settings for featured images can create new image sizes in addition to the SRCSET but will only be applied to single post featured image or the blog post images.

[epickenyan]

That is why I said earlier that function seems not to work because gtmetrix was flagging my images.

[Author]

Posts