1

I have added a code snippet to utilize the "medium_large" thumbnail size. This works fine on the back end and I can select this image size in all image blocks. It also seems to output the correct file in the HTML. However, the actual image downloaded to the browser is either Large or Full Size (whichever is smaller). I am confirming this by looking at the Sources tab in Chrome Inspect. I have also verified that the medium_large file exists on the server.

As shown in the attached screenshot, the source file in HTML is "outdoor_group-768x517.jpg", which is the medium_large image. But the current source is shown as "outdoor_group.jpg", the full size image.

Chrome Inspect Screenshot

Is there some special behavior of the medium_large image size that I don't know about?

4
  • Does this answer your question? Remove one srcset entry from wp_get_attachment_image Commented Jan 19, 2023 at 22:41
  • I flagged this question as a duplicate of that question since I think it helps. It's not the same question but the core problem is the same and my answer applies to both. The reason an unexpected source is being loaded is almost certainly that the sizes attribute is incorrect. You haven't shared the code snippet you used though, so I'm not certain if the code in my answer is relevant. Commented Jan 19, 2023 at 22:43
  • I believe that you're partially correct, that the problem lies with the srcset attribute. I've traced it down to how srcset responds to the resolution of the browser screen, which I've learned is not the same as the pixel width of the viewport. There is a good description of the issue on this blog post. To test this theory, I loaded up the page in question in a browser on my 2nd monitor, which has a lower resolution (1920x1080) than my PixelBook (2400x1600). At the lower resolution, the desired 768px image was loaded.
    – GregF
    Commented Jan 23, 2023 at 16:27
  • You still need to have a correct sizes attribute. The srcset attribute does not respond to the browser, the sizes attribute does. That blog post you linked is premised on the idea that the sizes attribute is already correct. The default sizes attribute from WordPress will not be correct so you still need to set it correctly. Commented Jan 24, 2023 at 2:39

1 Answer 1

0

I saw this problem recently on a project, and the answer is to disable responsive image markup. Simply add the below code into your theme's functions.php and you are golden:

add_filter( 'wp_calculate_image_srcset', '__return_false' );

Ref: How do I disable responsive images in WP 4.4?

Afterwards, you can insert the Medium Large a.k.a. medium_large images (if enabled) into your post editor and they will load correctly on the frontend.

For the record I think the Medium Large size is very underrated, and saves tons of time. We use it by default in our free HoverCraft theme for featured images, and also the default size for inserting media too. This is a special image size in WordPress because the width is fixed at 768px wide with auto-height depending on the ratio of the image file you uploaded, which makes theming and layout very easy to automate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.