dereklaw

We eventually found the cause of this problem. It is part of the OFFICIAL theme Twenty Seventeen, in code which “Adds custom image sizes attribute to enhance responsive image functionality for content images”.

In the theme’s functions.php file is a function:
twentyseventeen_content_image_sizes_attr()
which includes the line:
$sizes = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';

These odd image sizes are then used by Lightbox. The maximum image width is fixed at 580 pixels. I edited that line to:
$sizes = '(max-width: 1600px) 100vw, 1600px';
and Lightbox now works for me. I haven’t noticed any adverse effects.

That code is not in the newer Twenty Nineteen theme.

I’ve added the plugin and snippet, and reset the cache for luck, but still have the same incorrectly sized images.

Is there anything I could check in the source to make sure the snippet is running correctly?

• This reply was modified 5 years, 9 months ago by dereklaw.

Just updated to 1.5.8 and reset the cache. No change, I’m afraid.

The problem appears to be the img tag sizes attribute:
sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"

As I read this, the smallest windows of up to 767 pixels have the biggest images (89% = 682px). A window of up to 1000px has up to 54% (up to 540px) images, up to 1071px is 543px, and above that the image is 580px.

Sadly, that doesn’t change anything.

I had tried it already, having read of similar problems on here, but I have just now tried again without any effect.