Archived topic
Dispatch thumbnail sizes
4 replies · Started by Carl on February 11, 2022
Hi GP!
I just installed Dispatch on an existing site via the site library. I'm slowing getting everything sorted out, liking this theme although adjusting to GP is kind of confusing, but I'm fumbling around and getting there. :)
The site has posts with featured images of all different orientations - portrait, landscape, square etc. Not surprisingly, the homepage looks like a dog's breakfast with all the different thumbnails.
I have regenerated thumbnails with the regenerate thumbnails plugin thinking that would fix it up. But, if you look at the site in the private area you will see it is still kind of a mess.
Any pointers on how I can get it so all the thumbnails on the homepage are the same?
Hi there,
you can force the images to a specific size using some CSS:
.wp-show-posts-image img {
aspect-ratio: 3/2;
object-fit: cover;
}I must state that doing so may affect how the browser chooses what src-set image size to load. Which may result in a larger image being loaded on smaller devices.
Does the Dispatch theme make / use thumbnail versions of the featured images? With a browser plugin I can see that the images displayed on the homepage are the full dimensions of the featured image.
In my original post I had assumed that the theme was displaying thumbnails on the homepage (and category pages), but now the browser plugin showing full dimensions makes me wonder if we are loading the full size of every image on the homepage? This would be a significant performance hit and definitely not best practice in terms of Core Web Vitals.
PS. thank you for the CSS, I just implemented it and the home page looks much better :)
Still curious about the thumbnails.....
The home page is built with WP Show Posts plugin and WPSP does use src-set but its completely busted the minute you use CSS to resize the images. The browser just ignores src-set then.
So yes, it does mean the browser may load an image that is larger then necessary but that gets subjective.
For example on Google Mobile Pagespeed test it simulates a Moto4G - and the hero images on Dispatch will fill the width of its 360px screen.
But the Moto 4G has a x3 pixel density screen so the browser is gonna want to load a 360 x 3 = 1080px wide image.
If google flags you for Properly sizing images, then it shouldn't be too extreme ie i want a 360px image and you gave me a 1200px - its gonna to be i wanted a 1080px iamge for example
It is a problem with magazine style designs but we done our best with the current tools to elimiate the impact. And most users of Dispatch overcome any image loading issues with image otpimzation plugins or replacing featured images on their site particularly those loading above the fold on the home page to more appropriately sized images
