[Resolved] Custom image setting ignores size and provides full size image url

[Author]

Posts

[alisonH]

Tell us what you are trying to do?
I have set my featured image to use custom image size "news_thumb" which has been defined in my functions file AND added to the GUI. It shows up as an option in the blocks setting when I add them image. However the page is using the full size image. This is also the case if I change it to medium or thumbnail, it's ignoring all actual sizes.

Is there any documentation that you are following?
Used this help forum to find the right code to add the GUI, and I know it's worked as the size is included in the drop down.

Is there a similar example that we can see?
no

What is the link to your site?
This is the page in question, the first (test) news article has the correctly generated image sizes, but is using the full size url.
hidden link

It's using:
hidden link

It should be using:
hidden link

(other images haven't had their thumbnails regenerated yet, so are not relevant)

[Nigel]

Hi Alison

Could you share your debug info please? (hidden link).

When I check your site for the markup of the img tag, it looks like you are using an older version of Blocks than the current 1.5.2, as I would expect to see the img tag with srcset attributes, which are missing.

[alisonH]

This is the second time I've replied as the first reply seems to have disappeared, so sorry if it's a repeat.

I've updated the plugins so that the srcset code is now appearing. The issue is still there however. The debugging information is from after I updated.

Also, I've got a second ticket it, and have given admin/ftp access details to Shane, so I don't know if this would help you, I wouldn't want you both to be working at cross purposes and waste each others time!
https://toolset.com/forums/topic/wordpress-archives-not-using-blocks-editor-despite-being-set-to-do-so/

[Nigel]

Hi Alison

I'm doing some testing locally to double check what to expect with the recent changes relating to using srcset and sizes for images, and I'll get back to you in a little while.

[Nigel]

Hi Alison

I've been testing this with a variety of images on a site where I have a registered custom size, comparing what's output by the core Image block and the Toolset Image block using dynamic sources.

It seems to be working correctly when you choose a standard image size.

The img tag is created with the full range of image options added to the srcset attribute, while the size attribute is determined by the chosen image size in the settings, which effectively acts as a maximum size that might be used, although the browser may opt to use smaller images on narrower screens. So if using the twentytwentyone theme you were to choose Medium for the image size then the maximum sized image that would ordinarily be requested by the browser would be 300px wide. (Ordinarily, but on higher resolution screens—which nowadays is pretty much anything except a budget Windows laptop—larger images may be downloaded.)

But what I did find is that the image size settings with blocks don't recognise custom image sizes that you register using the core function add_image_size. (Actually, nor does the core Image block, which also only offers standard sizes.)

You can, instead, use the Add Custom Size link to specify some arbitrary size for the image. The UI is not very helpful here, as there is no visual confirmation that a custom size has been chosen, but checking on the front end I see that such a custom size *is* used, but this time directly as the src attribute, and srcset and sizes attributes are not applied.

So we have a few problems here that I've escalated to the developers, but essentially if you use Add Custom Size in the block settings, it should work.

If you find that it doesn't, let me know and I take a look.

[Nigel]

Hi Alison

A quick update: I'd overlooked that at some point registering custom image sizes with the function add_image_size alone isn't enough, you also need to use the filter image_size_names_choose for the custom size to appear in dropdowns to select a size (see https://developer.wordpress.org/reference/functions/add_image_size/#for-media-library-images-admin).

So an example for registering a custom size would be:

add_image_size( 'demo', 580, 420, true );
add_filter( 'image_size_names_choose', 'demo_image_size' );
function demo_image_size( $sizes ) {
	return array_merge( $sizes, array(
		'demo' => __( 'Demo size' ),
	) );
}

When you specify that size in the image block settings then it does appear to work in terms of choosing the right sized image for the src attribute (although it doesn't offer srcset and sizes attributes).

[alisonH]

Thanks for your help, I had already added that code - I think this is correct:

/* image sizes */
add_image_size( 'news-thumb', 420, 290, true ); // Hard crop
add_image_size( 'person-thumb', 300, 300, true ); // Hard crop

add_filter( 'image_size_names_choose', 'custom_image_sizes' );

function custom_image_sizes( $sizes ) {
return array_merge( $sizes, array(
'news-thumb' => __( 'News thumbnail' ),
'person-thumb' => __( 'Person thumbnail' )
) );
}

What I am finding now is that the toolset image block allows me to choose only the three default sizes, but will resize correctly to the medium size setting (the old setting, it's ignoring updates I've made to the medium setting).

The ordinary image block lets me choose my custom sizes, but then ignores that size anyway and uses the full size image on the front end.

The problem is that I want a custom image size that crops to a set height and width, and does not resize proportionally.

[Nigel]

Could I maybe take a look at your site to see, because when I tested it locally it mostly seemed to be working correctly once I had the image sizes properly registered.

Let me mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[Nigel]

Am I misunderstanding what you need?

I revisited the same link, and now it is using the 300px wide image rather than the full sized image that it was previously (screenshot).

I put the HTML in an editor so I could format it to make it easier to read, and srcset is offering all of the registered sizes while the sizes attribute effectively sets a max size of 300px, while the src attribute sets a fallback that uses the 300px wide image.

[php]
<img loading="lazy"
src="hidden link"
alt="" class="wp-image-18309"
srcset="hidden link 300w,
hidden link 150w,
hidden link 768w,
hidden link 450w,
hidden link 600w,
hidden link 870w"
sizes="(max-width: 300px) 100vw, 300px" width="300" height="190">
</size>

Is the problem how the images are being cropped?

[alisonH]

Yes, the cropping is the issue - it's currently using medium, which WAS set to 300 x 300px, although is now set to 420 x 290px. It's still using the 300px images for the medium setting however.

I had created a custom size of 420 x 290px, hard crop - that I wanted to use rather than medium size.

I have since added
update_option( 'medium_crop', 1 );
to my functions file to try and make the medium size work where I had planned to use the custom size, but the block editor is still stuck on medium being 300px wide.

[alisonH]

A bit more mucking about - and maybe it's because you've changed something? - and the toolset image block is showing the two custom sizes, and so I was able to select the one I want to use and it's reflected on the front end as expected!

[Nigel]

I didn't change anyting at all, I just logged in and checked the page on the front end to see what the current situation was, I've not even opened the editor in the back end.

Perhaps it was a question of completing regenerating the thumbnails?

[alisonH]

Maybe, but I had manually regenerated the most recent ones, and the rest stopped regenerating after getting to 17%! But it's working as I want it to now, which is the main thing, so thanks for your help!

[Nigel]

OK, great, I think we can close here then.