Image gallery setting

Hi @retrogamer,

The theme doesn’t have any control over what image sizes get output when a block is rendered – that’s all handled by the code in Core. You can verify this by switching to a different theme and checking that it behaves the same there.

If I inspect the images in one of your galleries, like the one in “About”, it seems like the resolution of the images in the gallery is pretty low to begin with. If the size of the original image is smaller than than one of the built-in WordPress image sizes, WordPress won’t generate that image size and use the full-size image instead. That could be what’s happening here.

For example, if you upload an image in 300×300 pixels and add it to an image block with the “Large” image size selected (1024×1024 pixels), WordPress will output the full-sized version of the image since it’s smaller than the “Large” image size to begin with.

— Anders

Hi @anlino

The “About” page does have some low-resolution images but the vast majority on the site are 1600x1067px, so above the “large” threshold, and these are the ones I’m concerned about as they’re a bit laggy when rendering on the homepage.

I’ve just noticed that if I change the preset for the gallery block, it does indeed change the size, for example, https://www.mariomuseum.com/wp-content/uploads/2023/01/famicom-robot-01.jpg becomes https://www.mariomuseum.com/wp-content/uploads/2023/01/famicom-robot-01-768×512.jpg

So not exactly the medium preset of 300px I was expecting, but still reduced, and that’s great for those individual posts.

But the homepage itself with latest posts, doesn’t seem to have the same kind of option. All the “thumbnails” on the homepage are using the full size images. I’m not sure how to change that now without resizing everything. Is there any hook I can use so it brings in a smaller version?

• This reply was modified 1 year, 10 months ago by retrogamer.

@retrogamer Oh, I see what you mean. The front page is a different beast, as the archive pages are not output using WordPress default gallery block, but rather are custom built in the theme.

The image size used on the archive pages is 1080 pixels wide by default. The reason for the large image size is that Eksell can be set to be show as little as one or two columns on desktop, so the images need to be large enough to look alright in that size. When shown in fewer columns, they are large enough to be retina on high-resolution displays.

You can’t modify the image size in the theme or WordPress settings, but you can overwrite it in a child theme. Create a child theme for Eksell, add a functions.php file to it, and add the following code to the file:

add_action( 'after_setup_theme', function() {
	add_image_size( 'eksell_preview_image', 540, 9999 );
} );

That code will reduce the preview image size (used on the archive pages) by half. After you’ve added the code, install and run the plugin Regenerate Thumbnails to generate new images for the featured images in your media library.

Thanks @anlino

This makes total sense, thank you.

I’ve tried the code above in my child theme that I already have set up, and I’m not seeing any change to the registered size for eksell_preview_image. It’s still 1080 pixels.

To rule other things out, I have also tried it with the following:

• all plugins deactivated
• temporarily in the parent theme functions.php
• all caches cleared each time

From the quick bit of online research I’ve done, I’m wondering if it’s to do with loading sequence? How do I ensure this code in the child theme redefines the image size?after?the parent theme adds it? I’m guessing the ‘after_setup_theme’ does this?

I’m at a loss otherwise, but if you have any other suggestions I would be very grateful. I feel as if I’m very close to solving this one!

• This reply was modified 1 year, 10 months ago by retrogamer.

@retrogamer Try changing it to the following:

add_action( 'after_setup_theme', function() {
	add_image_size( 'eksell_preview_image', 540, 9999 );
}, 20 );

The only difference is the number 20 argument passed to add_action, giving it a lower priority than the function in the parent theme which should result in it running afterwards (overwriting the value set by the parent theme).

Hi @anlino

So this has worked! eksell_preview_image is now registered as 540pixels!

Now when I refresh the homepage (cache cleared) and inspect a sample image to check its size, I get something like this example:

<img width="540" height="360" src="https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01-540x360.jpg" class="attachment-eksell_preview_image size-eksell_preview_image wp-post-image" alt="Mario's Time Machine, SNES" decoding="async" loading="lazy" srcset="https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01-540x360.jpg 540w, https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01-300x200.jpg 300w, https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01-1024x683.jpg 1024w, https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01-768x512.jpg 768w, https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01-1536x1024.jpg 1536w, https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01-1080x720.jpg 1080w, https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01.jpg 1600w" sizes="(max-width: 540px) 100vw, 540px">

But strangely, if I right-click the same image and open in a new tab, it’s the 1080p version. In this case, https://www.mariomuseum.com/wp-content/uploads/2023/01/snes-marios-time-machine-01-1080×720.jpg

The Chrome code inspector says the image intrinsic size is also 1080 × 720 px

So I’m not sure if it’s having the desired effect?

Sorry I don’t wish to take up too much of your time with this. Thank you.

@retrogamer Nice! By default, WordPress includes a srcset attribute on the post thumbnail image that specifies different image files for different screen sizes. It’s up to the browsers how to interpret and use that information (inconsistently, is how they handle it), so it’s possible that Chrome uses the 1080 pixel image since it’s still on the server.

If you want to remove the old 1080 pixel images, you can run Regenerate Thumbnails on featured images again with the “Remove thumbnails for unused image sizes” (approximate wording) setting checked.

Keep in mind that if you’ve included images in your post content in an image size that is no longer used on the site (maybe one registrered by a previous theme), running the plugin with those settings will remove the image files for the unused image size which can result in broken images.

Hi @anlino ,

I think you’re correct with this. It appears the browser will pull in the highest resolution image available from the srcset automatically.

Now that I’ve removed the 1080px images, it’s pulling in the 1024px versions. So I know it works, and I think I can live with that size and the loading times aren’t too bad!

I’m happy that this is resolved now and thanks so much for your incredible support.