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

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, "https://wordpress.stackexchange.com/" ), 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'] . "https://wordpress.stackexchange.com/" . $filename . '-' . $value['width'] . 'x' . $value['height'] . '.' . $file_ext );
        }
    }

}