[Support request] Blog/archives image/scaling/thumbnail problem.

[finansdoktorn]

Hi,
I recently started building my blog. As you can see at my website, I have one featured posts and then columns.
My problem is that I want to load images that are the same size, and not letting the browser scale down.
This is causing increased time to load, bigger file sizes and browser scaling.

When you click on a post, you see I use the featured image as a rather large hero image.
I want to have the larger file for the hero image inside a specific post, but on the archive/blog/start page, I want to use thumbnails (size about 430×179).

Please help!

[finansdoktorn]

I also have a question about something completely different, perhaps I should open a new support ticket?

There is a wierd 20 px padding to the left on the mobile version of my blog.
I have tried using css:

@media (max-width: 767px) {
.generate-columns {
padding-left:0px;
}
}

Above code is placed in the “extra css” part when customizing, code is not working.

[Leo]

Hi there,

Tom’s answer here should explain it:
https://generatepress.com/forums/topic/how-to-serve-scaled-images/

As he mentioned, the next version will be better 🙂

And yes please open a new topic for the separate question.

Thanks!

[finansdoktorn]

I see, hopefully it will be fixed! It is important for loading time.

[Tom]

Hi there,

So are you serving the full images on the archives/blog page?

[finansdoktorn]

Yes I am Tom. And since I have rather large images, because I use them for hero header on the individual posts, they impact the loading time.

If I right click, and open the images, they are full sized.

[Tom]

Right now you can resize them in “Customize > Layout > Blog”. However, we’ll be changing that in GPP 1.8, as on-the-fly resizers aren’t great and can cause server issues.

I would suggest doing something like this:

add_action( 'after_setup_theme', function() {
    add_image_size( 'your-image-size', 300, 300, true );
} );

Then you can do this:

add_filter( 'generate_page_header_default_size', function( $size ) {
    if ( ! is_singular() ) {
        return 'your-image-size';
    }
} );

You just need to tweak the your-image-size name and the sizes. The true refers to whether it should crop or not.

Once you do that, you’ll need to regenerate thumbnails so WordPress build the new sizes: https://wordpress.org/plugins/regenerate-thumbnails/

[Author]

Posts