Responsive Images – Generating multiple images from Theme Customizer control upload?

2 Views

So, after poking around in the code it looks like the filter image_make_intermediate_size is not called by the various WP_Customize_Control() classes at either WP_Customize_Image_Control() or it’s parent WP_Customize_Upload_Control().

I’m looking to auto-generate images of various sizes, for responsive image serving and I need to execute the image_make_intermediate_size() function with some custom sizes that are specific to my extended custom control. Just not sure how to ensure that the uploaded images call this function mainly because I haven’t been able to track down where or how the upload functionality of WP_Customize_Control() is “unhooked” from the default upload behavior where the function is normally executed.

Read More

Note that the way it works is obviously the best option, don’t want every image uploaded through the theme customizer to auto-generate all the default image sizes, but for my use case, I prefer to use native functionality and just pass some unique size paramters to image_make_intermediate_size().

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. If someone has a better solution, I’m open to it, however, what I came up with seems to work fine.

    Basically the following code is just waiting for the image to finish uploading and then hooking into the add_attachment action. Once the first is added, we hook in and then generate the new images via the post ID (for the image attachment) which is the only data passed to us by the add_attachment action.

    First, we get the image by calling the post by ID and then a bit of regex saves the various filepaths, filename, and other data bits. Note that I’m recursively adding 3 images of different sizes so change that if you’re just looking to create 1 image or images of different sizes. Also I’ve named my theme as a prerequisite for the $_POST data, from looking at this data on various image upload actions, it looks like this is the most concrete way to set a conditional for being inside the theme customizer. There’s not much else to go on, but none of the other areas that utilize the image editor include $_POST['post_data']['theme'], so just replace that with your theme name or use property_exists if you want it to apply to all themes and only the customizer.

    add_filter('add_attachment','generate_responsive_sizes');

function generate_responsive_sizes( $attachment_id ) {

    $image_data = get_post( $attachment_id );

    // quit if the post_type is not attachment and mime_type is not jpeg/jpg/gif
    if ( $image_data->post_type != 'attachment' || $image_data->post_mime_type != ( 'image/jpeg' || 'image/png' || 'image/gif' ) )
        return false;

    // quit if the theme is not pure - only PURE gets responsive images, add new themes with responsive images  here
    if ( $_POST['post_data']['theme'] != 'pure' )
        return false;

    $file = substr( strrchr( $image_data->guid, '/' ), 1 );
    $filepath = str_replace( $file, '', $image_data->guid );
    $file_arr = preg_split( '/./', $file );
    $filename = $file_arr[0];
    $file_ext = $file_arr[1];
    $upload_dir = wp_upload_dir();

    $sizes = array(
            '1024' => array(
                    'width' => 1024,
                    'height' => 768,
                    'crop' => true,
                ),
            '1680' => array(
                    'width' => 1680,
                    'height' => 1050,
                    'crop' => true,
                ),
            '2560' => array(
                    'width' => 2560,
                    'height' => 1440,
                    'crop' => true,
                ),
        );

    if ( ! is_wp_error( $image ) ) {
        foreach ($sizes as $key => $value) {
            $image = wp_get_image_editor( $image_data->guid );
            $dimensions = $image->get_size();
            if ( $dimensions['width'] < $value['width'] && $dimensions['height'] < $value['height'] ) {
                continue;
            }
            $image->resize( $value['width'], $value['height'], $value['crop'] );
            if ( $dimensions['width'] < $value['width'] ) {
                $value['width'] = $dimensions['width'];
            }
            $image->save( $upload_dir['path'] . '/' . $filename . '-' . $value['width'] . 'x' . $value['height'] . '.' . $file_ext );
        }
    }

}