Jetpack v.6.8, the latest version recently released by WordPress.com, offers some neat new features for your WordPress CMS, and one of the most interesting features is the new Site Accelerator. So technically, what it does is that it speeds up your WordPress loading time by optimizing your images and serve it along with your static files like CSS and Javascript from WordPress’ global network of servers.
Well, it does what it promises you. Unfortunately, the drawback is that it seems to have an issue with some themes, and among them is WordPress’ very own “Twenty Seventeen” theme that usually comes bundled with WordPress. The theme might throw an error message:
Warning: Division by zero in /(path..)/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php on line 22.
Other errors could be similar to this one, varying on your WordPress theme and its setup. To replicate this error in TwentySeventeen, I had setup the front page to be a static page then expanded it so it could show up additional pages along with it.
The Custom Theme option setup is this one:
NOTE: To enable Theme Options, which does not normally appear like the one above, you have to first go to Homepage Settings and switch “Your homepage displays” to A static page then select a page for your Homepage.
Note of my Front Page Section 2 Content setup. It’s set to a page with a Featured Image. The featured image will be use by TwentySeventeen as a huge image within its front page body. For this one, the featured image is an art gallery picture (see pic above).
Then I activated Jetpack’s site accelerator (Jetpack -> Settings and under Performance and Speed). Switching it on will also enable Speed up image load times and Speed up static file load times by default.
The result is that I got this error:
Most of the parts worked fine but it seems Jetpack has issues with images. I diagnose the problem and trace the error at wp-content/themes/tweentyseventeen/template-parts/page/content-front-page-panels.php. It’s a PHP file stored in Tweenty Seventeen’s Template Parts Folder and further inside Page Folder. I opened the PHP File with an editor.
See the marqueed code? That is line 20-22. This is what the PHP error message was pointing. Apparently, it involves a variable $ratio responsible for the image ratio. The error division by zero means that there is a number being divided by 0, which in math is impossible. So, from the two thumbnail variables (thumbnail[2] and $thumnmail[1]) in the code, we can safely assume that $thumbnail[1] is 0. With thumbnail[2] being divided by 0 equation, we get a division by zero error. Normally, TweentySeventeen doesn’t set thumbnail[1] to zero, which means that something is interfering with its values.
At first, I didn’t know what is causing the error, so I disabled all the plugins that I have to see if the error goes away. And when I did, the error message disappeared. This gave me a hint that one of the plugins is causing it. So, after disabling the plugins, I enabled them again one by one. There was no error until I enabled Jetpack, and that’s when I found out that Jetpack is the suspect.
The error can be fixed by a simple tweak in content-front-page-panels.php file’s code. There are two ways to fix this…
First, is adding: error_reporting(0); preferable in line 18 or before $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘twentyseventeen-featured-image’ );. Like this:
<?php if ( has_post_thumbnail() ) : error_reporting(0); $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' ); // Calculate aspect ratio: h / w * 100%. $ratio = $thumbnail[2] / $thumbnail[1] * 100; ?>
or the second approach, which is adding the condition that if $thumbnail[1] is empty or null or if $thumbnail[1] is equal to 0 then set $thumbnail[1] to any number:
<?php if ( has_post_thumbnail() ) :
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
if(empty($thumnail[1]) || is_null($thumbnail[1]) || $thumbnail[1] == 0){
$thumbnail[1] = 1;
}
// Calculate aspect ratio: h / w * 100%.
$ratio = $thumbnail[2] / $thumbnail[1] * 100;
?>
The problem with the second approach is that it’s bound to mess up the ratio. Regardless, with $thumbnail[1] having 0, empty, or null values, it won’t really make any difference.
Well, we can’t really call the two approaches a fix. It’s more like patching, but the real problem still remains.
The real solution to this is altering TwentySeventeen’s coding, which I won’t recommend since a theme update could revert it back to what it was before and will just destroy whatever you alter. The same with the solution to alter Jetpack’s code. What we can really do for this is report this bug to the developers. Or we can also do this for now:
The culprit for the mess up image ratio is the “Speed up image load times” switch. It reduces the sizes of the images in your website. You will also notice that the big images you put in your posts will become smaller. By disabling it, the division by zero error should go away.
Follow me at:
