blueimp jquery file uploader image_versions doesn't work

Question

i´ve the blueimp jquery file uploade. I´ve tried to make more image_versions. The first and the last image_version does work. In my case '', 'small' and 'thumbnail' works, the other one are not working. At the other image_versions the image would be uploadet but not resized to the right size.

This is my code snip:

'image_versions' => array(
            // The empty image version key defines options for the original image:
            '' => array(
                // Automatically rotate images based on EXIF meta data:
                'auto_orient' => true
            ),
            'small' => array(
                'max_width' => 150,
                'max_height' => 150
            ),

            'medium' => array(
                'max_width' => 200,
                'max_height' => 200
            ),

            'large' => array(
                'max_width' => 400,
                'max_height' => 400
            ),

            'xlarge' => array(
                'max_width' => 600,
                'max_height' => 600
            ),

            'square' => array(
                'crop' => true,
                'max_width' => 300,
                'max_height' => 300
            ),

            'thumbnail' => array(
                'max_width' => 100,
                'max_height' => 100
            )
        )

Answer 1

I just ran into this exact same issue. After digging around in the code I found that as it loops through the image versions it saves the resulting image object in cache. So after 'small' was processed... a cached version of the resulting image object ( 150 x 150 ) is being referred to as the file.

As such the source file is simply copied over for medium, large, xlarge, and square because the code thinks the image is 150 x 150. However the thumbnail is processed because it's smaller than 150 x 150.

To get around this you can add the no_cache option to your image versions - which makes the code less efficient but solves your (and my) issue.

so your code would look like this:

'image_versions' => array(
    // The empty image version key defines options for the original image:
    '' => array(
        // Automatically rotate images based on EXIF meta data:
        'auto_orient' => true
    ),
    'small' => array(
        'max_width' => 150,
        'max_height' => 150,
        'no_cache' => true
    ),

    'medium' => array(
        'max_width' => 200,
        'max_height' => 200,
        'no_cache' => true
    ),

    'large' => array(
        'max_width' => 400,
        'max_height' => 400,
        'no_cache' => true
    ),

    'xlarge' => array(
        'max_width' => 600,
        'max_height' => 600,
        'no_cache' => true
    ),

    'square' => array(
        'crop' => true,
        'max_width' => 300,
        'max_height' => 300,
        'no_cache' => true
    ),

    'thumbnail' => array(
        'max_width' => 100,
        'max_height' => 100,
        'no_cache' => true
    )
)