Photon Image Problem

Sorry, forgot to say thanks in advance for any help you can provide!

Luis

if ( ! isset( $content_width ) ) {
        $content_width = 1038;
}

The problem with that snippet is that it checks if the value is already set first. Since the value is set in the parent, the $content_width doesn’t get changed to match your child theme’s width.

I would recommend following the method to change the $content_width value in your theme:
https://developer.wordpress.com/themes/content-width/#adjust

I hope this helps.

Hi, Jeremy!

Thanks a lot for your reply. I tried the new code and while it does work perfectly for images, my Youtube embeds are still off in that they “hang” from one side as opposed to appearing with 100% column width. Here’s an example:

https://en.astromono.com/design-focus-guild-01-%e2%80%a2-liberation-maiden/

I tried editing this behavior with CSS and even though it did get the video to appear with the width of the container (1038px), the video is not responsive as it used to be.

Thanks again for the awesome suppport!

Luis

Quick update. I installed the Fluid Video Embeds plugin and the video issue is now solved, however if you look at full-width template pages, I have full width images being served at the wrong size.

Here’s an example:

https://astromono.com/top-10-e3-2015-playstation/

My $content_width is set at 1038px, but Photon is resizing the image to 948px while still stretching it to fit the 1038px width of the column. If I deactivate Photon, images are served at full size (as they should be), but then I won’t be able to use tiled galleries and they will load slightly slower.

What’s causing this?

Could you let me know what your $content_width settings are right now? Did you change the value for a specific template only?

Could you also open that post in the post editor, switch to the HTML tag, and copy the HTML generated by the image? If you could then paste it here, I will be able to try to reproduce.

Thanks!

Certainly!

The parent theme has a $content_width = 474; by default. My child theme’s $content_width is defined as follows:

if ( ! isset( $content_width ) )
    $content_width = 474;
 
function astra_adjust_content_width() {
    global $content_width;
 
    if ( is_page_template( 'full-width.php' ) )
        $content_width = 1038;
}
add_action( 'template_redirect', 'astra_adjust_content_width' );

add_action( 'after_setup_theme', 'thumbnail_size_tweak', 11 );

function thumbnail_size_tweak() {
    set_post_thumbnail_size( 1038, 572, true );
}

The value is for all templates, regardless of whether it’s a page or post.

The HTML generated by the image in the editor is the following:

<p class="full-image"><img class="alignnone wp-image-2730 size-full" title="My E3 2015 Top 9: Microsoft" src="https://en.astromono.com/wp-content/uploads/sites/2/2015/06/fortnitebig.jpg" alt="My E3 2015 Top 9: Microsoft" width="1038" height="572" /></p>

Sorry for the late reply, but I hope this info helps.

One additional thing I noticed is that, if you inspect the images that appear in the post, you’ll see that the WordPress CDN is serving the images at a max width of 948px for some reason, even though the images themselves are bigger (1038px wide).

Thank you!

The value is for all templates, regardless of whether it’s a page or post

If you want your new content width to apply to all posts and pages, you’ll need to remove if ( is_page_template( 'full-width.php' ) ) from the code you posted above, so the new $content_width is applied to all pages.

Let me know how it goes!

Hi!

Thank you for the reply. The value without the if ( is_page_template( 'full-width.php' ) ) is how I initially had it and if you go to this link, we’re right back at the beginning of the issue.

https://astromono.com/top-10-e3-2015-playstation/

Setting the content_width that way affects not only the full-width images, but also the images inside tiled galleries and even the preview images in Youtube videos.

In all fairness, at least Photon is now serving the correct image size in full width, not just serving the resized 948px width version scaled to 1038px.

Is there a fix?

Would you be okay send through a copy of your functions.php file for your child theme? You can place it in a gist – https://gist.github.com/

If you don’t feel comfortable sharing it publicly then you can send it through to our support team directly: https://jetpack.com/contact-support/?rel=support

Hi! Sure I can, here’s the link to the gist:

https://gist.github.com/luislandero/3c6e66061074a29b3f032000ca754291

If you need any additional files or info, please let me know and thank you so much for getting this far with me into resolving this.

Can you try using the tiled_gallery_content_width hook to set the width of your tiled gallery?

https://developer.jetpack.com/hooks/tiled_gallery_content_width/

Thanks, I can try using it and letting you know, but it will still leave the video embeds looking all weird. Is there any fix for that?

How are you currently embedding the videos? Are you using Jetpack’s shortcode to embed them or something else. If you’re using Jetpack you can try using this hook: https://developer.jetpack.com/hooks/youtube_width/