Poor performance with custom image sizes
-
I wanted to make this plugin compatible with my custom image sizes. After reading https://github.com/kylereicks/picturefill.js.wp#respond-to-custom-image-sizes my first thought was “Omg why is this so complicated”. Anyway I have edited a bit the code from that article and ended up with following code. It can be improoved but it suits my needs.
function getImages() { $images = array( 'img-320' => 320, 'img-768' => 768, 'img-1024' => 1024, 'img-1450' => 1450, 'img-1900' => 1900 ); return $images; } responsiveImages(); function responsiveImages() { foreach (getImages() as $key => $val) { add_image_size($key, $val, false); add_image_size($key . '@2x', $val * 2, false); } add_filter('picturefill_wp_image_sizes', 'theme_remove_thumbnail_from_responsive_image_list', 11, 2); function theme_remove_thumbnail_from_responsive_image_list($image_sizes, $image_attributes) { return array_diff($image_sizes, array('thumbnail', 'thumbnail@2x', 'medium', 'medium@2x', 'large', 'large@2x', 'full')); } add_filter('picturefill_wp_image_attachment_data', 'theme_picturefill_new_size_attachment_data', 10, 2); function theme_picturefill_new_size_attachment_data($attachment_data, $attachment_id) { $data = array(); foreach (getImages() as $key => $val) { $data[$key] = wp_get_attachment_image_src($attachment_id, $key); $data[$key . '@2x'] = wp_get_attachment_image_src($attachment_id, $key . '@2x'); } return array_merge($attachment_data, $data); } // Add the new image size(s) to the responsive queue add_filter('picturefill_wp_image_sizes', 'theme_add_new_small_size_to_responsive_image_list', 11, 2); function theme_add_new_small_size_to_responsive_image_list($image_sizes, $image_attributes) { $data = array(); //'thumbnail', 'medium', 'large', 'full'); foreach (getImages() as $key => $val) { array_push($data, $key); array_push($data, $key . '@2x'); } if (!in_array($image_attributes['min_size'], $data)) { return $data; } else { return $image_sizes; } } // Set the breakpoint for the new image as a new size add_filter('picturefill_wp_media_query_breakpoint', 'theme_picturefill_new_small_size_breakpoint', 10, 3); function theme_picturefill_new_small_size_breakpoint($breakpoint, $image_size, $width) { foreach (getImages() as $key => $val) { if (in_array($image_size, array($key, $key . '@2x'))) return $val; } return $breakpoint; } }I think that everything is properly done here but still there is one critical bug. When I open any website with picturefill code the above code is executed and the filter “picturefill_wp_image_attachment_data” is applied in file picturefillwp\inc\class-model-picturefill-wp.php on line 100. After that there is this loop
foreach($image_attachment_data as $attachment_size => $attachment_data){ if($this->image_needs_to_be_created($image_attachment_data, $attachment_size, $attachment_data)){ $new_meta_data = wp_generate_attachment_metadata($attachment_id, get_attached_file($attachment_id)); wp_update_attachment_metadata($attachment_id, $new_meta_data); $image_attachment_data[$attachment_size] = wp_get_attachment_image_src($attachment_id, $attachment_size); } }Which increases load time about 10 times longer. When there is more that one image (in my case about 15) page loads in 20 minutes… When I comment out this loop. Everything works fine and page loads instantly. Whats the point of this loop? Can this be fixed?
The topic ‘Poor performance with custom image sizes’ is closed to new replies.