UploadField: SyntaxError: Unexpected token <

[mschilder]

Today I gave your repo a go. Have installed libjpeg-9a, jpegoptim-1.4.1 and optipng-0.7.5 on my Mavericks Mac on a SilverStripe 3.1.5 installation.

Contents of /mysite/_config/optimisedimage.yml:

---
After: 'silverstripe-optimisedimage/config#core'

---
ImageOptimiserService:
  enabledCommands:
    - jpegoptim
    - optipng

Contents of /mysite/_config.php:

(...)
// Enable jpegoptim and optipng image optimisation
Image::set_backend("OptimisedGDBackend");

Now, when I upload an Image using a CMS UploadField the file is uploaded and stored, BUT the file is not optimised and in the UploadField area the following error is shown: SyntaxError: Unexpected token <

How to fix this?!

[stecman]

Hi @mschilder, can you provide more information about the response you're getting from SilverStripe? The full response can be viewed in the network tab of your browser's dev tools - I suspect it will be an HTML error response instead of the expected javascript. From fiddling around to replicate your issue, it looks like this is a problem with something else in your code base (eg. fields missing from the database requiring a /dev/build).

As an aside, you can set the image backend in the YAML config using the following (the readme needs to be updated):

Image:
    backend: OptimisedGDBackend

[mschilder]

Thanks for you reply. I removed the lines from /mysite/_config.php and added some to optimisedimage.yml:

---
After: 'silverstripe-optimisedimage/config#core'
---
Image:
  backend: OptimisedGDBackend
ImageOptimiserService:
  enabledCommands:
    - jpegoptim
    - optipng
availableCommands:
  jpg:
    jpegoptim: '%s/jpegoptim -p --strip-all --all-progressive %s'
  png:
    optipng: '%s/optipng %s -o 7 -strip all -i 1'

The error message is gone now, but I don't think images are optimised. I have an 58KB Photoshop PNG that is optimised to 41KB using ImageOptim app. After adding this large version to the Upload field the file is uploaded fine, but still 58KB...

[mschilder]

Any thoughts how to debug this further. It feels like currently nothing is being optimized (see msg above).

[stecman]

Only images resized/resampled via the image backend are optimised in the current version (CroppedImage, SetWidth, SetHeight, PaddedResize etc, plus any custom resize methods). The original image is never optimized in the current version. This is mentioned in the readme:

Uses various binary tools like jpegoptim and optipng to optimise resampled images created by SilverStripe

If you are looking to use an optimised version of the original without resizing, you currently need to add an image resize method that returns the original image:

class ImageExtension extends DataExtension
{
    public function SameImage()
    {
        return $this->owner->getFormattedImage('SameImage');
    }


    public function generateSameImage(Image_Backend $backend)
    {
        return $backend;
    }
}

Config:

Image:
    extensions:
      - ImageExtension

You'd then use this in your template as:

$Image.SameImage

This solution isn't ideal, but it works:

$ identify Boat.jpg _resampled/SameImage-Boat.jpg
Boat.jpg JPEG 1024x683 1024x683+0+0 8-bit sRGB 138KB 0.000u 0:00.000
_resampled/SameImage-Boat.jpg JPEG 1024x683 1024x683+0+0 8-bit sRGB 64.4KB 0.000u 0:00.000

It would be cool to have an option to optimise on upload, though we don't have a need to develop that at the moment as we almost always use image resampling of some variety. You're welcome to send a pull request with this functionality if you like.

If you need to debug this further, you can check the output of the shell commands in ImageOptimiserService::execCommand. Does that answer your query?

[mschilder]

Thanks, clear. Will look into this solution!