ImageKit - An Asynchronous Thumbs API

plugin

#41

A new beta is out, featuring with some fine-tuning in terms of error handling and Widget UI. Getting ready to launch 1.1.0 final! :smiley:


  • 1.1.0-beta2 (2016/10/29)
    • Widget API now displays more helpful errors in most situations (only browsers, that support the foreignContent feature of SVG. Currently, most browsers will still only show the old error (but looks great in Firefox).
    • Widget Errors are now recoverable. You don’t have to reload the panel any more, if a server-side error occurs.
    • Better integration with Whoops for error-handling for the panel widget.
    • Confirm dialog for clearing thumbs folder is not displaying as overlay, rather than as system dialod. Supports ESC key for cancel and ENTER for confirming the action.

Get it from GitHub


#42

ImageKit 1.1.0 is finally here! :tada:

Most important new features:

  • ImageOptimization: ImageKit can now utilize mozjpeg, pngquant, optipng, jpegtran and gifsicle to optimize your images, resulting in much faster loading times.
  • Better Error-Handling: Detection of out-of-memory errors is more reliable now.
  • Improved Widget: Most errors are now recoverable and the confirm dialog is now displayed as an overlay.

Download from GitHub


#43

Just for your information: There was a little error in 1.1.0 that prevented the widget from working properly. I pushed an update (1.1.1), that fixes that just a couple of minutes ago.


#44

is it possible to hook up an external service as imagekit optimizer? i would love to use the php post api of imageoptim.


#45

This is currently not possible, as ImageKit does not offer an API for including external optimizer, but nevertheless I already thought about integrating services like ImageOptim, Compressor.io, TinyPNG etc. However, you could just write a custom Thumb Driver to do image processing. As ImageOptim also supports resizing and cropping, you might get better results by doing so. Otherwise, Kirby would just downscale the images and then transfer an already compressed files (I’m assuming that most of your images are JPEGs) to your cloud-based provider to compress them again. As long, as you don’t need special stuff like image filters or focus crop, a custom driver might be the better option for you. However, if you have to resize the images on your own server and optimization should be done on your already created thumb files I could add an API for integrating custom optimizers.


#46

ImageKit 1.1.3 is out

  • Add redirect detection to Widget API, so the indexing feature works with templates, that only send a redirect to the browser instead of showing content.

#47

ah yes. thumb driver. thx for pointing me to that direction.


#48

i am trying to get the optimizers to work (localhost right now). is there anyway to check if file has be optimized?

i have the binaries from the wordpress plugin and did setup the paths in config file. but turning true/false on the optimize config setting (and removing all thumbs manually) does not generate different filesizes. maybe a fallback to gd is in place and i do not notice a misconfiguration?

c::set('imagekit.optimize', true);
c::set('imagekit.gifsicle.bin', '/mypath/site/binaries/gifsicle-mac');
c::set('imagekit.jpegtran.bin', '/mypath/site/binaries/jpegtran-mac');
c::set('imagekit.optipng.bin',  '/mypath/site/binaries/optipng-mac');
c::set('imagekit.pngquant.bin', '/mypath/site/binaries/pngquant-mac');

#49

Where did you store your custom driver? ImageKit extends any existant existant thumb driver by wrapping the function into another one. To make this work, your custom driver needs to be loaded before ImageKit is loaded.


#50

custom driver
the custom driver is stored as a plugin named a-thumbsdriver-imageoptim. so its loaded before imagekit, right? the *-imagekit-job.php files also show my driver as driver. so that works as far as i can tell.

optimizers
but i also wanted to check out the optimizers you suggested. so i disabled my custom driver (switching back to gd) and activated the optimizers setting and did set the path for each binary on my mac. but i see no way of checking if that worked. to track the command i put the following behind jpegtran.php post()

exec(implode(' ', $command));
file_put_contents(kirby()->roots()->index().'/debug.txt', 
    implode(' ', $command).PHP_EOL.
    f::size($this->thumb->destination->root).' <= '.f::size($tmpFile)); // simple debug

but its never triggered.


#51

obviously i checked the path to binary itself by calling the binary on terminal with -help param. i get the jpegtran help text.

PATH/jpegtran-mac [switches] [inputfile]
Switches (names may be abbreviated):
  -copy none Copy no extra markers from source file
  -copy comments Copy only comment markers (default)
  -copy all Copy all extra markers
  …


#52

all solved. after a reboot of system my debug code gets triggered on localhost. successfully tested on http server as well.


#53

How does the mozjpeg (or other optimisers) fit in between gd or imagemagic?

Lets say i upload very hd image and crop it and optimize. What is the flow?

Does gd crop it and encodes new jpeg that is then passed to mozjpeg as final step? Is it passed between in some efficient way?

I was just wondering if there is some double encoding. Maybe thats even desireable idk. Just curious.


#54

Hey @krisa,

if you’re using GD for image processing, the intermediate format is a high-quality JPEG for performance reasons. Although it’s not perfect solution because of double-encoding, it’s a reasonable compromise between quality and speed (encoding and intermediate 24-bit PNG file would very slow for large images).
If you’re using ImageMagick, the intermediate image is stored as an uncompressed TGA file, which gives a better result and should also be faster.


#55

Lovely.

One more question: Your intented workflow is somebody makes new post (which creates new job) and then has to push the widget button? Or am i missing something?

I cant imagine our clients doing that - lazy false is probably solution. But can i call the jobs maybe from hook? Or if i have cron checking for jobs and runing them?


#56

A post was split to a new topic: ImageKit widget can break with certain template


#57

ImageKit processes thumbnails lazily. So basically, your clients don’t have to do anything at all, as thumbnails are generated on the fly as they are needed. The widget allow you to generate all thumbnails in advance, but is not necessary to make the plugin work. If you don’t use the widget, the first visitor of a page just may experience a longer loading time for images, when these have not been generated yet.

IMHO using a hook for generating thumbnail is problematic, as depending on your content this may take very long. It would also require us to define a default set of image sizes and generate them all for every uploaded file (as WordPress does), as Kirby’s panel does not know which sizes are defined in your templates as you save. The most reliable way of finding out is to make an http request to that specific page, that triggers creation of thumbnails (or jobs in case of ImageKit). But generating every image in every possible resolution can easily mean, that you have to generate 10-20+ thumbnails for every uploaded image, resulting in very slow uploads. You also don’t want to confront your editors with having to wait for 20 seconds when they hit save. I already thought about auto-generation of thumbnails and I have a (somewhat working) prototype for that. Basically, it’s just a bit of javascript that runs through the scanning process in the background, every time you hit save in the panel. As we are currently working on a completely overhauled panel, I will continue to work on it once the new panel is ready. So this will still take a while …

Best,
Fabian


#58

Well i ask because i had problem with images in og:meta image tags for social networks when i tried it. I don’t know how the requests differ but i had to generate the images manualy. Crawlers wouldn’t make them and neither would regular client.

What i am thinking is to have some scheduler to check and make thumbs every 10 mins. Even simple cron would do. Or incron checking new jobfiles in thumb folder might work the best i guess?

The thing is i still don’t know how to properly call the thumb generation. Do i just run the job files created in thumb folder?


#59

@krisa: You can override ImageKit’s global settings, including lazy creation of thumbs. (see https://github.com/fabianmichael/kirby-imagekit#62-overriding-global-settings)

Just set imagekit.lazy to false at the place where your thumbnail is generated for social networks and the corresponding thumbnail will be created immediately:

$image->thumb([
  'width'         => 600,
  'imagekit.lazy' => false,
]);

#60

Not shure what I’m doing wrong (or if this is a bug), but I can’t get pngquant and gifsicle to work. Whenever the widget tries to optimize a .png file, an error like this pops up:

Thumbnail creation for "content/1-blog/07092017-agbic/xf19ne.png" failed. Please ensure, that the thumbs directory is writable and your driver configuration is correct.

The thumbs directory and binaries should have the correct permission (755), I’ve also tried to use the pngquant-linux binary from EWWW-Image-Optimizer and one I’ve compiled myself, with no difference. Disabling pngquant also causes some problems, resulting in the following error after a few successful jpeg optimizations using mozjpeg:

Call to a member function image() on boolean in file: /var/www/virtual/username/html/site/plugins/imagekit/lib/lazythumb.php on line: 143

My config.php looks like this:

// ImageKit
c::set('thumbs.driver', 'im');
c::set('imagekit.widget.discover',false);
c::set('imagekit.optimize',true);
c::set('imagekit.mozjpeg.bin', '/home/username/bin/cjpeg');
c::set('imagekit.pngquant.bin', '/home/username/bin/pngquant');
c::set('imagekit.gifsicle.bin', '/home/username/bin/gifsicle');

Any help would be greatly appreciated, as I have no clue how I could fix this.