[Resolved] Images resized in css not html

[Matt]

I have a few images that aren’t being resized as I think they should be. GT metrix is showing that the three images from either my sidebar Latest Posts, or my custom WP Show Posts box “Related posts” at the bottom of blog pages the aren’t being resized. This also seems to be affecting the images in the “Standard” WP posts box from the front page.

I’m pretty sure these are the boxes that aren’t resizing at least.

Neither define an image size though they do have the css suggested under the Header Image css from https://gpsites.co/dispatch/using-wp-show-posts/ if this makes a difference at all.

The front page has six images reportedly not being resized

A blog page which just has the sidebar related posts and another related posts below has three images not resized in html
The Related Posts thing is a hook I put together containing the following code as an element

<h2 text-align=center>Related Posts</h2>
<?php
if ( is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
} else {
$cat = get_category( get_query_var( ‘cat’ ) );
}

$cat_slug = $cat->slug;
$list = get_page_by_title( ‘related’, ‘OBJECT’, ‘wp_show_posts’ );
wpsp_display( $list->ID, ‘tax_term=”‘ . $cat_slug . ‘”‘ );
?>

It shows after content on posts and uses the data generated by WP Show Posts plugin. At least I think it does, I mash together things half the time and they mostly work.

[Tom]

Hi there,

In your WP Show Posts lists, do you have values set in the width/height fields in the “Images” section?

If you’ve added values there, the image should actually resize automatically.

If you have and it’s not working, can you link us to your site so we can take a look?

[Matt]

No, I don’t have the images set to resize manually. I thought that WP posts used src set to be able to resize what was displayed based on the screen size?
My issue would be that I could set the image size for say desktop, but then the mobile page would still load a larger size than needed.

[David]

Hi there,

WP does use src-set but the Dispatch site uses CSS for the various post styles.
This CSS includes size and object fit properties which means the ‘correct’ src-set size image may not be selected by the browser as it can no longer base its requirements on the device and container sizes.

I say ‘correct’ as its a very objective term – and there are some things to consider here.

Example – The Sidebar posts:

On desktop the post images occupy around 300px in width.
On Tablet by default the sidebar will stack below and those post images could be 768px wide.
On my plus size mobile they are 400px.

But all my devices are Retina so if it can the browser would grab an image with the x2 resolution. So ideally my mobile wants an image thats at least 800px….

Ironically it is the Desktop that requires the smallest image of them all.

Apart from disabling the CSS that creates the different styles that ‘break’ src-set, you can set the image size in the WP Show Posts list that is best suited to the chosen device of your audience. For example you could make the sidebar post images 400px wide – this is fine for desktop and mobile – maybe a little low res for smaller tablets…

[Matt]

Super helpful – thanks!

I’ll probably try manually changing the sizes to something around what is on screen and ignore retina.

Would love it if you guys could contact the Flint Skin guy for a suggestion 🙂

[David]

The ones in the Grid header i would probably go with 800px. Thats going to cover you for the tablet wide views ( and 2x retina mobiles ).

For the rest 400px probably work well – again it covers the mobile sizes.

[Matt]

With the update to WP Show Posts and image resizing being done, is there any update to Dispatch planned for the image sizes to be done on the fly based on screen size and taking images from the relevant designated sizes set in wordpress?

Would help with pagespeed 🙂

[David]

Probably not – as the Dispatch grid will always require CSS to deal with those in between screen size responsive changes. But i may have a Dispatch 2.0 in the workings 🙂

[Matt]

Nice!

I’d definitely be interested in more blog/niche site style templates that are small, fast loading especially on mobile, and have the ability to display similar, popular, and recommended articles without heavy db/php/js use.

I know a lot of similar site owners who want to use generatepress but other themes are more suited out of the box to these sites.

[David]

Definitely something we’re looking at – really appreciate the feedback.

[CARLOS]

Count me in as also interested in more Dispatch-style magazine/news templates. I’m looking for something to replace a TagDiv Newspaper installation that’s way too bloated.

[Matt]

I’m getting issues resizing images with WP Show Posts beta that may well be related to the custom css on certain boxes in the Dispatch theme.

Could someone take a look to see if this is a GP/Dispatch issue and not a WP Show Posts one? The theme is reliant on the plugin too and the basis of why I paid for it :/

https://wordpress.org/support/topic/image-resizing-wp-show-posts-issues/

[David]

Hi Matt,

raise a new topic on this forum as its Dispatch site related, with a link to your site and let me know the specific issue and i can take a look.

[Author]

Posts