fabianmichael / kirby-imagekit Goto Github PK
View Code? Open in Web Editor NEWAsynchronous thumbnail creation and optimization for Kirby 2
License: MIT License
Asynchronous thumbnail creation and optimization for Kirby 2
License: MIT License
Wouldn't this be possible? Maybe you already thought about that and there are pitfalls/disadvantages, but I absolutely see use cases where this could be handy (especially at bigger sites with many subpages/thumbnails). If not with hooks, this might be done with a per-page-creation-action, triggered by a button or sidebar widget (if they'll make it at some point ;)).
Make it possible to generate all pending thumbnails via cronjob.
Test, if Kirby 2.4 content representations feature is fully compatible with the Widget API
using most current imagekit and imageset.
if have a couple of imageoptim optimized files. but i also have jpg optimizers setup in config file.
the result is since my source files are smaller than on server optimized the source files get deleted!
why is that?
kirby-imagekit/lib/optimizer/base.php
Line 214 in 8b71fff
Would be so cool to use the focus-selector in the panel by @flokosiol and get thumbs asynchronously generated by ImageKit.
Dennis
I've done a boilerplate for the readme-file:
https://github.com/jenstornell/kirby-boiler-readme
A part of your readme file is like this:
However, even with a valid license code, it is discouraged to use it in any project, that promotes racism, sexism, homophobia, animal abuse or any other form of hate-speech.
Maybe my version would be:
It is discouraged to use this plugin in any project, that promotes racism, sexism, homophobia, animal abuse or any other form of hate-speech.
Can I use it in my boilerplate readme?
I've still not tried your plugin, but hopefully I will have some time for it soon. But I have another question:
Maybe I'm blind, but I could not find it. I will not buy it before I've tried it but when that is, it would be good to know where to go.
Thanks!
You can of course get 'mozjpeg' from brew on a Mac ;-)
brew install #mozjpeg
if you don't have hombrew:
https://brew.sh/
Also wanted to say thank you for this plugin, it is splendid, still testing but will be buying some licenses soon.
Hi Fabian, I am testing your two plugins, Imagekit and Imageset. What I see (and how it works) is really great so far!
Though I do get a 404 not found
in the console — both in latest stable Chrome (see attached image) and Safari on macOS 10.12.3 — on first load and when no thumbs have been generated yet (thumbs folder is empty).
It is only a message, because the images do show up, and the ‘missing’ images can be opened in a new tab (the thumbs URL).
Refreshing the page makes the error messages disappear. And it only happens when I set imagekit.lazy
to true
.
Any ideas? Script order? I do load my scripts (including imageset.min.js
) via Filament Group's enhance script: https://github.com/filamentgroup/enhance…
I've tested the imagekit plugin a couple of times in several projects, and it always worked very well (though it never was used at production pages due to other reasons). Now I'm again trying to implement it to a image-heavy site where the client asked exactly for such a feature. But this time it drives me crazy – when I'm using the create-funtion within the panel widget, it always adds another site during the image-search process – and I have absolute no idea why. No errors are shown, the process just stops at the last page:
I'm using the default setting for imagekit, and have several plugins installed, and also tested all the plugins within a clean starterkit installation, where it always works perfectly. Do you have any idea or hint where I can have a deeper look? Would be awesome!
Edit: disabling the discover mode helps with creating the thumbnails. However, I'd really like the client to be able to use also the discover mode…
Hi I’m getting the following error the I try to generate the thumbs via the widget.
Undefined index: newCustomer in file: .../site/plugins/shopkit/shopkit.php on line: 940
Any idea? Thanks in advance.
The crawler of the widget can break in some scenarios, so we need an option to exclude certain pages and/or templates from being crawled.
See: https://forum.getkirby.com/t/imagekit-widget-can-break-with-certain-template/7988/2
I had my own custom image kirby tag which used the caption from the image metadata as the caption. Is there a way I can modify this plugin to allow that as well, instead of requiring me to write (image: image1.jpg caption: This is my caption)
?
Here's my project page blueprint which allows captions for images in their metadata:
title: Project
pages: false
files:
fields:
caption:
label: Caption
type: textarea
Thanks in advance!
EDIT: Maybe this is a question for kirby-imageset instead (I'm using these two plugins together).
EDIT2: FWIW, I found the site/plugins/imageset/tags/image.php
file in the kirby-imageset plugin and added the following at line 66 to try and set the caption.
// try to get the caption from file metadata
if($file) {
if(empty($caption) and '' != $file->caption()) {
$caption = $file->caption();
}
}
All works now! You can close this, thanks.
are you planing to update to Kirby 3?
We are using a 2.x version of Kirby right now, but I do plan to update. Your imagekit would really speed our pages up, so it would be nice to integrate it together with the update ;-)
Hey Fabian,
I've tried your plugin on my apache local dev environment and it works like a charm. But on my nginx-webserver it stucks at scanning through all pages. (It doesn't even start I think)
I have it running in a sub-directory, maybe that causes some problems, but actually I never had any problems with this nginx-conf:
#####################
#####################
# KIRBY-CONFIGURATION #
# block content
location ~ ^/normannenhaus/content/(.*).(txt|md|mdown)$ {
rewrite ^/normannenhaus/content/(.*).(txt|md|mdown)$ /error redirect;
}
# block all files in the site folder from being accessed directly
location ~ ^/normannenhaus/site/(.*)$ {
rewrite ^/normannenhaus/site/(.*)$ /error redirect;
}
# block all files in the kirby folder
location ~ ^/normannenhaus/kirby/(.*)$ {
rewrite ^/normannenhaus/kirby/(.*)$ /error redirect;
}
# site links
location ~ /normannenhaus {
autoindex off;
try_files $uri $uri/ /normannenhaus/index.php?$uri&$args;
auth_basic "Restricted Content";
auth_basic_user_file /etc/nginx/.htpasswd;
# (Also tried it without password-protection)
}
# panel links
location ~ /normannenhaus/panel {
try_files $uri $uri/ /normannenhaus/panel/index.php?$uri&$args;
}
# deny access to .htaccess files
location ~ /\.ht {
deny all;
}
#####################
#####################
This is how it looks in the panel:
(FYI there are way more than 29 images)
This is how images are looking:
This is an excerpt from my site-config in kirby:
/**
* Server-Configuration
*/
c::set('url', 'https://beta.wottpal.com/normannenhaus');
c::set('subfolder', '/normannenhaus');
I am also running on HTTPS if that helps any further.
Thanks in advance!
Dennis
i got imagekit and imageset installed. page loads and images are created on the fly but widget fails – stuck start of at creating images.
TypeError: undefined is not an object (evaluating 'e.message')
somewhere near
v.index(function(e){w.value(e.current/e.total).text(i("imagekit.widget.progress.scanning")+" "+e.current+"/"+e.total)
Hey Fabian,
I imagine running the "Create" task every night automatically with a cronjob. Do you have any ideas how to do that?
Dennis
Kirby 2.4 uses Whoops for error handling. ImageKit should use the new API to provide improved error handling for Kirby 2.4 that also uses Whoops. This is mostly important for the Widget API.
Hey i can't seem to get this work on osx when i want to test it.
Ive installed current mozjpeg with brew and its in my path working (cjpeg from commandline is working).
c::set('imagekit.mozjpeg.bin', '/usr/local/opt/mozjpeg/bin/cjpeg');
c::set('imagekit.mozjpeg.bin', 'cjpeg');
Doesn't have any effect. It doesn't even fail or give errors it just gives out unoptimized image.
Questions:
Thanks!
I'm using this plugin to resize uploaded images to a set max dimension:
https://github.com/schnti/kirby-image-shrink
The plugin is really small and simple. It triggers the panel-file-upload
hook and resizes the uploaded image, and replaces the original.
<?php
// Shrink large images on upload
kirby()->hook('panel.file.upload', 'shrinkImage');
kirby()->hook('panel.file.replace', 'shrinkImage');
function shrinkImage($file)
{
$maxDimension = c::get('ka.image.shrink.maxDimension', 1000);
try {
if ($file->type() == 'image' and ($file->width() > $maxDimension or $file->height() > $maxDimension)) {
// Get original file path
$originalPath = $file->dir() . '/' . $file->filename();
// Create a thumb and get its path
$resized = $file->resize($maxDimension, $maxDimension);
$resizedPath = $resized->dir() . '/' . $resized->filename();
// Replace the original file with the resized one
copy($resizedPath, $originalPath);
unlink($resizedPath);
}
} catch (Exception $e) {
return response::error($e->getMessage());
}
}
But when ImageKit is installed, the automatic resizing does not work anymore, since ImageKit delays the actual resize of the image.
Is there a way to work around this issue? Or if you would add this as a feature to your plugin to automatically resize uploaded/replaced images?
Hey there,
while ImageSet makes all them nice sizes, how would I optimize their quality with ImageKit? They don't seem to play along real nice .. what am I missing?
Cheers!
I just installed the ImageKit and ImageSet, along with ImageMagick command line tools. When I click "Create" in the panel I see the "Scanning pages..." message and bar, but no progress occurs.
Apache on MAMP PRO
Kirby version 2.5.7
PHP version 7.1.8
I don't know 100% on my permissions. What could be wrong here?
EDIT:
I don't know if this is related, but when I visit the front-end of a page with an image via the browser, the related thumb/*
folder is created along with an *.jpg-imagekitjob.php
file. But no image is created there.
The *.jpg-imagekitjob.php
file looks like:
<?php
return array (
'imagekit.version' => '1.1.3',
'source' =>
array (
'filename' => 'HistoricDyessColony.jpg',
'dir' => NULL,
'page' => 'features/this-is-a-placeholder-for-essay-title-1',
),
'options' =>
array (
'filename' => '{safeName}-1760x920-50-50-q40.{extension}',
'url' => 'http://***.loc:3000/thumbs',
'root' => '/Users/luke/Sites/vd/***.org/code/thumbs',
'driver' => 'gd',
'memory' => '128M',
'quality' => 40,
'blur' => false,
'blurpx' => 10,
'width' => 1760,
'height' => 920,
'upscale' => false,
'crop' => false,
'grayscale' => false,
'overwrite' => false,
'autoOrient' => false,
'interlace' => false,
'bin' => 'convert',
'fit' => 'width',
'focus' => true,
'ratio' => '1.91',
'focusX' => '0.50',
'focusY' => '0.50',
),
);
I've also boosted the following settings in the related MAMP Pro php.ini:
max_execution_time = 240 ; Maximum execution time of each script, in seconds
max_input_time = 240 ; Maximum amount of time each script may spend parsing request data
memory_limit = 1024M ; Maximum amount of memory a script may consume (8MB)
When trying to create thumbnails from the panel, after scanning the pages in my site the following error is shown:
Call to a member function image() on boolean in file: [...]/site/plugins/imagekit/lib/lazythumb.php on line: 143
Any ideas what I can do to narrow down/fix the issue?
Testing out ImageKit, which is an amazing plugin!
The panel widget is showing '...' for both items though, even though the plugin seems to be working properly.
There is nothing in the error logs (or console).
Kirby & Panel 2.3.2, PHP 7, Apache.
Is there anything else I can do to help diagnose this issue? Enabling imagekit.debug doesn't seem to provide any useful information.
Thank you Fabian!
For even better optimization, I think it would be great to have WebP support (like EWWW Image Optimizer does) and serve it only to the browsers that support it.
At the time of writing, only Chrome and Opera supports the file type.
Doesn't work with new Kirby feature thumb presets
Pending thumbnail jobs need to be invalidated after moving the Kirby installation to another server or paths need to be handled differently. Otherwise, the widget will throw an error when hitting "create" without prior cleaning of the thumbs directory.
Is it possible to use the Kirby built-in image optimizer and to set a standard quality?
$page->image()->crop(xxx, xxx, 70);
Hey,
I've just noted that automatic discovery seems not to work when I use the following routing-setup. (Which is basically just the Omitting the blog folder in URLs example from the Kirby Docs).
c::set('routes', [
// Rewrite all 'items/...' URLs to be at the root of the site
// and '/items' itself to the root '/'
[
'pattern' => '(:any)',
'action' => function($uid) {
$page = page($uid);
// if($uid == 'items') go('/');
if(!$page) $page = page('items/' . $uid);
if(!$page) $page = site()->errorPage();
return site()->visit($page);
}
],
[
'pattern' => 'items/(:any)',
'action' => function($uid) {
go($uid);
}
]
]);
Am I doing something wrong here? If I remove these two rules it starts discovering all pages unter items/
just properly.
Dennis
Consider to add support for storing images with alpha channel as JPEGs in SVG files, which can save about 50 % of compared to PNG files.
After migrating my Kirby site to a Digitalocean droplet running Ubuntu 16.04, whenever I try to create thumbnails using the Imagekit widget I get the following error, even though libxml is enabled (verified via command line and phpinfo()):
The discovery feature of ImageKit needs PHP with the libxml extension to run. in file: /var/www/html/site/plugins/imagekit/widgets/imagekit/lib/apicrawlerresponse.php on line: 48
I can't figure out why this is happening... memory_limit is set to 1024M. It works fine on my local development server but there don't seem to be any differences between the droplet and localhost.
When an empty page is returned to the client, ImageKit’s crawler will fail with the following message:
DOMDocument::loadHTML(): Empty string supplied as input
The API should check whether a document contains any HTML before handling it off to the DOM parser.
See: https://forum.getkirby.com/t/imagekit-widget-can-break-with-certain-template/7988/5?u=fabianmichael
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.