Photon images break layout

I’m sorry to hear you’ve run into issues.

This is most likely linked to how your theme calls and displays that image on the page; Jetpack’s Photon module will work well when core WordPress functions are used to retrieve the images, but will sometimes break the layout when custom functions are used, or when image dimensions are not defined alongside the image (that can happen when the theme builds its own image tag).

Could you let me know what theme you currently use on your site? Is there somewhere I could download it to take a look at the code?

Thanks!

It runs on Genesis child theme, which you’ve probably heard of it? It’s a commercial theme so I can’t really send you a link to download it.

Are you able to get help from the theme author? If so, could you ask them to let you know how the post thumbnails are called and displayed in that section of your home page? If they could copy the whole code used to display the images, that could be very helpful.

Feel free to send them a link to this thread, or direct them to this contact form if they’d like to continue this conversation with us!

I’ve raised a support ticket with StudioPress, just have to wait and hope for them to respond I guess.

Thanks! Let me know how it goes!

Reply from the support team:

I’ve checked your website’s home page and it looks like Photon is currently disabled.

From the screenshots at the thread, it looks like they maybe taken from a Retina display? Photon extension brings in double sized images, on high resolution screens.

To make sure the image dimensions are always followed, same as set in your widget settings, can you please add following CSS code at bottom of your child theme’s “style.css” file:

.home-middle .featured-content .entry .entry-image {
max-width: 360px;
}

.home-bottom .featured-content .entry .entry-image {
max-width: 150px;
}

Once you’ve added the code clear your browser’s and plugin cache and check with Photon extension again.

I hope this helps! Please let us know how it goes and if you have any further information or questions.

I wasn’t using a retina display, it was just several screenshots stitched together to form a single image that showed everything at once. But is it correct that Photon loads “double sized images, on high resolution screens”? I don’t upload high resolution images to begin with, so unless you’re up-scaling I’m not sure that’s correct?

Anyway, I’ve not tried their fix yet, but does it sound right? I guess I’ll give it a go anyway because I’ve nothing to lose and can easily take it out again!

But is it correct that Photon loads “double sized images, on high resolution screens”?

That’s correct. Photon doesn’t upscale images, though. It pulls larger images when it can, when the original image you’ve uploaded is large enough so Photon can use it on HiDPi devices.

Anyway, I’ve not tried their fix yet, but does it sound right?

It might help for your Internet Explorer screenshot, but most likely won’t help for Firefox. Ideally, you wouldn’t need this as Photon is able to use the image dimensions when they’re provided by the code used to display the images on the page.

Could the theme author give you the exact code used to pull the images and display them on the page?