Image Size Problem

[Sonja]

Hello,

on a test site i have developt a new design for this site, based on markter site. Now i have import the settings and copy the css, but the image sizes are not the same.

As you can see, on the page hero with wpshowpost, the sizes are not the same.

And also on the posts below the hero, the sizes are not correct. On the test site, the sizes shows as 300 x 169 px, but on the live site not.

What can be the problem?

[Leo]

Hi there,

Have you tried the image options in WP Show Posts?
https://docs.wpshowposts.com/article/images-overview/#image-width-height

The featured images have this CSS applied which is setting them to max-width: 300px;:
https://www.screencast.com/t/f1mRgGYkQw

It’s all working correctly from what I can tell. Perhaps it’s a caching plugin issue?

Can you make sure to clear and disable caching plugins every time a topic is opened and we need to take a look at it?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

Yes, i have tried image options in WP Show Posts. But this is no solution, because then the images are not responsive and it looks really ugly when smaller the browser.

The featured images do not all have the same size. You can see this, wehen you scroll down the site.

This is not a caching problemm, although i have clear the cache before posting.

[Leo]

But this is no solution, because then the images are not responsive and it looks really ugly when smaller the browser.

That’s just how cropping works unfortunately. A better solution which I always try to use is to make sure the images are the exact/ratio you want before uploading then you won’t have to play around with cropping.

The featured images do not all have the same size. You can see this, wehen you scroll down the site.

The featured images all have the max-width of 300px which is what the CSS is doing – the height is set at auto so it varies a bit depends on the ratio of the original picture.

You can try cropping those in the customizer again but will run into the same issue as WPSP 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

So do you mean, that this problem would be solved, if all featured images have the same size?

I wonder how my former theme (mh magazine theme) has done this. Because with this theme, all featured images were displayed in the same size.

If so, can a plugin like Regenerate Thumbnails help?

[Leo]

So do you mean, that this problem would be solved, if all featured images have the same size?

That would be my recommendation to achieve the layout you have in mind.

I did something similar for rumour:
https://gpsites.co/rumour/

At least use the pictures that are the same ratio, so we can size them down using the max-width.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

And what´s your opinion on my other question? “If so, can a plugin like Regenerate Thumbnails help?”

[Leo]

Don’t think that’s what the plugin is for but I’m not sure as I haven’t tried it.

Probably give it a shot if you think it might work for you?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

No, i don´t want to destroy something. I think this plugin can only set the correct sizes, if it can take them from the theme or from the media size settings in WP.

But i don´t know, if the plugin can read this correct size anywehere in the theme.

[Sonja]

I mean there must be a way to do this. It can not be a solution, to go through hundreds of blogposts manually, to change the featured image, which also mus be editid.

[Leo]

What is the issue on mobile with cropping?

Can you show me?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts