Carousel / Photon: when resizing the browser, Photon doesn't update the queried image

[jeherve]

Steps to reproduce:

1. Open a small browser window
2. Load a page including a Carousel, and where Photon is activated
3. Open one of the images in the Carousel view
   • Inspect the image: it uses a small version of the image (e.g. ?fit=600%2C520)
4. Resize your browser
   • Inspect the image once again: it still uses the same version of the image, instead of updating to use a version more adapted to the new viewport

Original trac ticket:

• https://plugins.trac.wordpress.org/ticket/1783

[lancewillett]

This is not a bug. Changing the behavior would be a really nice enhancement, though.

Photon URLs are built on first page load only based on the theme's content_width rules.

Two things would need to happen:

1. after a browser resize, some kind of JS call to update image paths.
2. after a page reload, use JS to override the content_width value with the width of the images' parent container element.

[rase-]

I like @lancewillett's suggestion. We would need to experiment with it a bit to see how nice it actually looks in practice.

[kraftbj]

As an alternative for mobile situations, use a conditional using jetpack_is_mobile conditionals to set a content width that is more appropriate for a mobile device to prevent a hypothetical 700px wide image loading on an iPhone (landscape at 468px IIRC).