Photon loads wrong image proportions

Could you give me a few examples, so I can take a closer look at this issue?

Since you obviously can’t leave Photon activated on your site, do you think you could activate Photon for a few minutes, copy the exact Photon URL of one of the problematic images, and then deactivate Photon and send me a link to the page where the image appears, so I can compare the 2 image URLs?

If you want your site URL to remain private, you can also contact us via this contact form:
https://jetpack.me/contact-support/

Thanks!

Hello Jeremy,

Thank you for following up on this.

To respond to your request and do the procedure in the shortest time possible to lessen the disruption to our readers, I have copied the two urls of an image in our home page before and after activating Photon:

https://www.teaguardian.com/wp-content/uploads/2014/03/benefits-infusion-progression-520×245-1453996930.jpg
https://i0.wp.com/www.teaguardian.com/wp-content/uploads/2014/03/benefits-infusion-progression.jpg?w=520

If you can visit the site within today before we update it, the picture on the top left of the post list is the one in concern. The difference in this particular picture is small, but still easily visible, that for some others is quite unsighty and ruins the theme, particularly in mobile devices.

This is the homepage of the site: Tea Guardian

Thanks!

Could you try to enable the Regenerate Thumbnails plugin, and then go to the Tools > Regenerate Thumbnails menu to force a refresh of all images?

Let me know if it helps.

We actually did that. It didn’t.

Sorry to hear that.

the picture on the top left of the post list is the one in concern.

Is that picture in the Slider area, or below it?

If it’s part of the slider, could you walk me through the steps I can follow to add the slider to a test site of mine? I’ve tried to reproduce the problem by installing the theme and playing with Post Thumbnail Editor on a test site of mine, but so far everything seems to work properly with the default layout. I can’t seem to activate that slider you’re using, though, so I must be missing something in the theme options.

Thanks!

It is the picture below the slider area.

The slider is hooked to the header of the home page, rather than in the post list area as in the theme, but that really is not the issue. The error disrupts the slider as well as the post list layout.

We have set the post list thumbnail dimension to the proportion of 780: 371 and generate a set a thumb sizes basing on that. I think you will see how the error disrupt the theme when you have a few posts using theme pictures of various size proportions and cropped to that same dimension using Post Thumbnail Editor then you will see the issue. You may download photos of various sizes from our site to test that if you want to.

I think you will see how the error disrupt the theme when you have a few posts using theme pictures of various size proportions and cropped to that same dimension using Post Thumbnail Editor then you will see the issue.

I can’t seem to be able to reproduce the problem, even when using various sizes of images, different orientations, and cropping them again in Post Thumbnail Editor. The pictures’ size never changes on the front page, since it’s determined by the theme, and Photon resizes the images to match that size.

We have set the post list thumbnail dimension to the proportion of 780: 371 and generate a set a thumb sizes basing on that.

Did you edit the theme’s content templates to do so? If so, could you let me know how the images are output on the page? You can use Pastebin to share code snippets here.

Thanks!

@Flyhead, just to make sure everyone is on the same page, when you say you’re using the “Post Thumbnail Editor”, you mean my plugin, correct? I have a feeling that @jeremy is talking about wordpress’s built in editor. As far as I know Photon doesn’t work with my plugin — I believe that Photon just stores the original image and then creates the crops itself — it doesn’t pull the crops down and cache them.

If I’m wrong, I apologize, and I’ll see myself out ??

when you say you’re using the “Post Thumbnail Editor”, you mean my plugin, correct? I have a feeling that @jeremy is talking about wordpress’s built in editor.

I think we’re both talking about your plugin. But I don’t think it has anything to do with the issue at hand, no worries ??

You’re correct that the custom crops created by your plugin won’t be displayed as long as Jetpack’s Photon module is active, as Photon creates a resized version based on the original image. However, that’s not happening on @Flyhead’s website (Instead of displaying a resized version of the image on the site, the resized parameters aren’t even added to the image), and that’s the problem ??

@sewpafly, you are right, I refer to your plugin, which we have employed since day one when we re-develop our site in WordPress, and a year before we started to activate Photon. So it seems strange that if Photon doesn’t store the crop info, how come there was no error before this last Photon update? Or that we simply have been lucky all posts used during that period had theme image of the same origin dimension…

@jeremy, we did edit some of the theme’s content templates, but we did not use any other codes to generate the thumbnails, only this plugin by sewpafly. If what you are saying about theme’s builtin function would automatically crop images to the same proportion, we wouldn’t be needing this extra plugin. Try activating the slider function and view the home page in various media width if you do not have PTE cropped the images, you will understand how messed up the original theme can be. Activating Photon results in the same situation.

If what you are saying about theme’s builtin function would automatically crop images to the same proportion, we wouldn’t be needing this extra plugin.

To be clear, the Post Thumbnail Editor plugin doesn’t make your images smaller; it allows you to create custom cropped Featured Image instead of the one that’s created by WordPress. Your images won’t have a different size if you don’t use the plugin; they’ll have the exact same dimensions. You won’t have the option to use a custom cropping method (e.g select the lower left corner of an image instead of cropping from the center).

Try activating the slider function and view the home page in various media width if you do not have PTE cropped the images, you will understand how messed up the original theme can be.

I couldn’t find how to actually enable that Slider function on my test site. Could you walk me through it?

Thanks!

Jeremy, thank you for continuing to follow up on this. It’s 11:44 pm in our time zone and I have had a long day. May I go thru with you the slider tmr? Thx again

Sure thing! I’ll be here ??

We have the same issue. Wrong image proportions.

Photon is active and we create a new post, with featured image.

In web browser image displays as uncropped / wrong size – Even when the browser image info shows correct size – Photon delivers the wrong image – The original image, not the resized/cropped image.

The correctly sized image is requested from Photon (as seen in screenshot) but the actual image is the full size.

When Photon is deactivated, the correct image and size displays.

Screenshot image info Photon active:
https://dl.dropboxusercontent.com/u/3306550/photon-active.png

Screenshot image info Photon not active:
https://dl.dropboxusercontent.com/u/3306550/photon-not-active.png

Thank you.

Problem with wrong thumbnail image proportions occurs on smartphones.
I only have the iPhone 6+, but the problem can be demonstrated to occur on various smartphones by (on a Mac) using the Xcode device simulator, or using Chrome’s Developer Tools device mode.
Problem occurs with slider on our homepage at https://comptonshawford-pc.gov.uk/

Some of the thumbnails shown in the slider (on a smartphone) have the wrong dimensions when photon is active.

The html source to display such a thumbnail (if you’re using s smartphone) is
Without Photon:

<div class="wpp_image">
<a href="https://comptonshawford-pc.gov.uk/2016/04/local-elections-may-2016/"><img height="110" class="wpp_image_right" src="https://comptonshawford-pc.gov.uk/web/wp-content/uploads/2016/04/ballot-woman-300px-250x254.png" align="right" scale="0"></a>

With Photon

<div class="wpp_image">
<a href="https://comptonshawford-pc.gov.uk/2016/04/local-elections-may-2016/"><img height="110" class="wpp_image_right" src="https://i1.wp.com/comptonshawford-pc.gov.uk/web/wp-content/uploads/2016/04/ballot-woman-300px.png?zoom=3&fit=250%2C254&ssl=1" align="right" width="249" src-orig="https://i1.wp.com/comptonshawford-pc.gov.uk/web/wp-content/uploads/2016/04/ballot-woman-300px.png?fit=250%2C254&ssl=1" scale="3"></a>

You can see that photon modified the src parameter (as expected) and added an src-orig parameter. But it also seems to have added width="249" which is causing the thumbnails to have the wrong proportions.

Photon is currently activated so you should be able to see the effect.

I’m using a chargeable plugin, WP Posts Pro, to display the slider.
It allows me to override the thumbnail height, which I have set to 110.
It’s working the way I want when photon is inactive, but obviously I would like to be able to use photon.

Note: I also use a caching plugin which I have temporarily deactivated so that it doesn’t interfere with the diagnostic process.