flokosiol / kirby-focus Goto Github PK

Hi,

on my machine focusCrop seems to ignore the quality parameter.

$image->focusCrop($width, $height, X);
creates always the same image unaffected by X.

$image->crop($width, $height, X);
works as expected and appends the quality parameter (-qX.ext) to the filename.

I would appreciate any help on this issue.

Some image ratios seem to be stretched.

Input images:

2800 x 1300

1766 x 1300

1300 x 1300

869 x 1300

Output images with 1440x650:

Original: 2800 x 1300

Original: 1766 x 1300

Original: 1300 x 1300

Original: 869 x 1300

Can you reproduce this with the images or is my configuration wrong?
It seems like only square input images are cropped correctly.

Maybe it has something to do with these lines, but I can't figure it out: https://github.com/flokosiol/kirby-focus/blob/master/focus.php#L88-L126

Are there any plans to update the plugin to support the native WebP and AVIF support in Kirby 3.6?

I've got a new idea.

Maybe we sometimes need all the images to have a focus point on top center position, like this:

echo $image->focusCrop(300,200, array('top' => 0, 'left' => 'center'));

The above could force the image position on top 0 and calculated center. It would be perfect for screenshots where we don't want to spend the time to manually set the focus points.

In the future I even hope it will reach the core but it seems to take time:
getkirby-v2/toolkit#99

What do you think?

Hey there,
I'm currently building a plugin using colorist, and so far everything works fine: except for replacing Kirby's thumb method. I see that you went that way once, but commented it all out, so here's my question: What's your experience with the matter, and why did you decide to "replace" Darkroom::$types instead of hooking into thumb?

Whatever I do, I can't return anything useful using the workflow described in the docs / you commented out ..

Seems images dont get cropped, but the file name does get changed to what should be with the crop ratio and size as part of the filename, but image is the orginal. It is just being passed through to the media folder without getting manipulated. If I switch back to PHP 7.2, eveythings good.

Observered on Centos 7 using GD and current Kirby release (3.3.5).

Hey, if I try to add the focus field to a blueprint like that:

sidebar:
  meta:
    type: fields
    fields:
      focus:
        label: My Focus Field
        type: focus

I get the The field type "focus" does not exist" error.

I'm on 3.0.0-beta-6.17 and dev-kit copied the folder to site/plugins/focus

Am I doing something wrong?

I am trying to add some sort of watermarking method to FocusCrop and GDlib to have a flexible way of creating automated watermarked images when using certain commands, i have had my attempt which seems to create the watermarked images as intended, however it seems like once i changed the code, kirby's $image->resize() function does not seem to work anymore.

so i am wondering if i am missing out on a few lines of code which potentially break something..

// GDLib
$image = $this->overlay($image, $options); // this i put below all other options e.g. blur,grayscale at about line 30

// later in the file

    protected function overlay(SimpleImage $image, array $options)
    {
        if($options['overlay'] === false){
            return $image;
        }
        return $image->overlay(kirby()->root('assets').'/watermark.png','center',1,0,0);
    }

and within my template I am using

<?php echo $image->focusCrop($w,$h,['overlay' => 'yes'])->url() ?>

this seems to correctly do the job, but using the default $image->resize() command does not generate images anymore.

any idea?

Hey @flokosiol,
do you have any plans in upgrading this plugin to Kirby 3?

It seems like in 3.0.8, the assets for avif and webp somehow land in the wrong folder, which in my cases causes the frontend to fallback to some non-cropped and not properly sized version of the image. I had to downgrade for the moment, as it broke the website.

What I see so far, in my root folder (I have a public folder setup as described on the Kirby website), the cropped version of the avif and webp images added (this is the wrong location. They also have double extension naming, so there is definitvely something wrong.

When I check the correct location for the images (in this case, media/pages/team, I find some avif and webp version, but they are not cropped.

• Expected behaviour (like in 3.0.7): Cropped AVIF and WebP images go to /media/pages/team
• Current behaviour (3.0.8): Cropped AVIF and WebP images go to /media.

srcset config:

  'default' => [
    '280w' => ['width' => 256, 'height' => 256, 'quality' => 100, 'crop' => true],
    '335w' => ['width' => 335, 'height' => 335, 'quality' => 100, 'crop' => true],
    '560w' => ['width' => 560, 'height' => 560, 'quality' => 100, 'crop' => true],
    '670w' => ['width' => 670, 'height' => 670, 'quality' => 100, 'crop' => true],
    '728w' => ['width' => 728, 'height' => 728, 'quality' => 100, 'crop' => true],
    '1024w' => ['width' => 1024, 'height' => 1024, 'quality' => 100, 'crop' => true],
    '1456w' => ['width' => 1456, 'height' => 1456, 'quality' => 100, 'crop' => true],
    '2048w' => ['width' => 2048, 'height' => 2048, 'quality' => 100, 'crop' => true]
  ]

Edit: The srcset config example doesn't above is not showing the chosen image format, as in my case, I have a function generating this and adding the 'format' options for avif and webp.

At the moment this plugins works only with GD Library. The next step should be to support ImageMagick as well …

Not sure if this is jut me, but when using the focus plugin, uploaded images with certain EXIF rotation settings get rotated/stretched.

Step to reproduce

1. Download EXIF orientation sample images from this repo: https://github.com/recurser/exif-orientation-examples
2. Download and setup Kirby Starterkit: https://github.com/getkirby/starterkit
3. Login to the panel and navigate to any album (e.g. Photograph->Trees)
4. Upload the sample photos, everything should work as expected
5. Download and install the Focus plugin
6. Delete the sample photos or navigate to another album
7. Upload the sample photos again, numbers 5-8 will be stretched and/or rotated in the wrong way

I fixed this with a hook in the meantime.

Instead of defining image options on every use, can this plugin work with default/named presets from the sites config.php?
https://getkirby.com/docs/reference/system/options/thumbs

For Thumbnail definitions used in several places of the page it would be great to call the method with the name of a preset or without any parameter for default preset.

Hi,

thank You for the great plugin!
Unfortunately if I extend the focus field with the 'help' option, the help text is not being displayed, it's in the source code though (tested in Chrome v72).
It's not a big deal, I just thought I'd let You know.
Cris

Hey there,
I wrote an alternative thumb driver using colorist. It is capable of image conversion to AVIF, WebP and some other formats, as well as resizing them etc. As I liked your Focus plugin, I added support for it.

Don't know if that's enough to be mentioned on your plugin's README, as it's not exactly an extension - but I'm planning to maintain compatibility 🦊

Regarding AVIF, this will take time as Kirby currently hardcodes image formats being resizable (for Nolt feedback, see here).

Cheers & thanks for your great plugin!
S1SYPHOS

When I click save the focus point moves a few pixels. It's probably not a problem for me right now but I wanted you to know.

Watch carefully and you will probably see it:

I guess I'm using it with GD. At least I don't have ImageMagic installed.

Thank you very much for your excellent plugin!

I have the media folder at another place:

echo (new Kirby([
    'roots' => [
        'media' => __DIR__ . '/files',
    ]
]))->render();

Images are linked to a /media/.. location in the image preview page. It should be /files/.. in my case. As a result there are broken images in the panel. Afterwards the whole panel does not work any more because there seems to be files overwritten or deleted as a side effect.

The problem occurs as soon as you set the focus point and save. Then, the preview image disappears. As a second side effect, the complete kirby panel does not work anymore. The browser page stays white and in the console you can see some 404 errors.

Inside the focus/config.php it seems that something is breaking the whole thing. I have pretty much a basic setup with latest k-next focus as well as latest beta and made sure all files have templates.

Is there a way to disable upscaling? If I use

->focusCrop(1200,600)

and if the image is just 800px width it blows it up to 1200px.

I looked into the code and think that GdLib.php should look like this: (I added mime params and method from Core GdLib Class)

<?php

namespace Flokosiol\Focus;

ini_set('memory_limit', '512M');

use claviska\SimpleImage;
use Kirby\Image\Image;
use Kirby\Image\Dimensions;
use Kirby\Image\Darkroom;
use Kirby\Filesystem\Mime;

class GdLib extends Darkroom
{
    public function process(string $file, array $options = []): array
    {
        $options = $this->preprocess($file, $options);
        $mime    = $this->mime($options);

        // original image dimension for focus cropping
        $originalImage = new Image($file);
        if ($dimensions = $originalImage->dimensions()) {
            $options['originalWidth'] = $dimensions->width();
            $options['originalHeight'] = $dimensions->height();
        }

        $image = new SimpleImage();
        $image->fromFile($file);

        $image = $this->autoOrient($image, $options);
        $image = $this->resize($image, $options);
        $image = $this->blur($image, $options);
        $image = $this->grayscale($image, $options);

        $image->toFile($file, $mime, $options['quality']);

        return $options;
    }

    protected function autoOrient(SimpleImage $image, $options)
    {
        if ($options['autoOrient'] === false) {
            return $image;
        }

        return $image->autoOrient();
    }

    protected function resize(SimpleImage $image, array $options)
    {
        if ($options['crop'] === false) {
            return $image->resize($options['width'], $options['height']);
        }

        // focus cropping
        if (!empty($options['focus'])) {
            $focusCropValues = \Flokosiol\Focus::cropValues($options);
            return $image->crop($focusCropValues['x1'], $focusCropValues['y1'], $focusCropValues['x2'], $focusCropValues['y2'])->thumbnail($options['width'], $options['height']);
        }

        return $image->thumbnail($options['width'], $options['height'] ?? $options['width'], $options['crop']);

    }

    protected function blur(SimpleImage $image, array $options)
    {
        if ($options['blur'] === false) {
            return $image;
        }

        return $image->blur('gaussian', (int)$options['blur']);
    }

    protected function grayscale(SimpleImage $image, array $options)
    {
        if ($options['grayscale'] === false) {
            return $image;
        }

        return $image->desaturate();
    }

    /**
     * Returns mime type based on `format` option
     *
     * @param array $options
     * @return string|null
     */
    protected function mime(array $options): ?string
    {
        if ($options['format'] === null) {
            return null;
        }

        return Mime::fromExtension($options['format']);
    }
}

Hey @flokosiol,

This plugin is so intelligent and useful – thanks!

I'm having a bit of a problem however with using it to resize gifs down to a smaller pixel dimension, it results in a considerably larger file size. For example, a 1000 x 1000px gif at 1.27mb when scaled down to 400 x 400px become 2mb and at 800 x 800px becomes 8.4mb.

I'm assuming this has something to do with the imageMagick driver, but can the settings on your plugin be used to fix this? Perhaps by using -scale instead of -resize ( https://www.imagemagick.org/discourse-server/viewtopic.php?t=29205 )?

Any help is much appreciated!

Hey! First things first: Thank you very much for having a beta of your plugin for the upcoming Kirby version! I really appreciate it!

I'm trying your k-next branch with the latest nightly build of Kirby and my image won't update if I change the focus. I don't know, if I'm missing something here, but for the moment, I have to empty the corresponding media directory...

Hey there!
Whenever I replace an image, the focus field isn't updated automatically. This is just an observation, would be comfortable and "nice to have", so decide for yourself 🦊

Cheers
S1SYPHOS

Hi,
I have a Problem with the croping at PNGs with transparent background.
Normal croping from Kirby works like a charm, but focusCrop() kills the transparent background.

I got a 500 error :

Call to undefined function dd()

Maybe use dump()instead ?

I tried to figure this out for a while what the problem could be, but I don't really get it.

So, I use focusPreset(<presetName>) to generate the fallback image for the <img> tag while using focusSrcset(<presetName>) for the <sources> of the picture tag.

And it looks like that when I change the focus of an image a second time, this applied to focusPreset but not focusSrcset. They are clearly getting generated on the server, but the src URL to the new cuts are not update except for the focusPreset function.

Hint: if I delete the media folder and refresh the pages, the URL get correctly applied.

Hi there,
I have the issue that locally my cropped images are created just fine, but when I transfer the site to my server (uberspace.de, CentOS 7, PHP 7.4), the cropped images do not get created and therefore seem to be missing from the page:

It does create corresponding entries in the .jobs folder though:

So I am not quite sure what is going wrong. Any idea what is wrong and/or how I could debug this?

Thanks!

Edit: I just switched to regular crop for testing and figured out, that does not work either. So this might be a Kirby issue rather than an issue with the plugin. Will investigate further and close the issue in case I find out it is indeed Kirby's fault.

The crop doesn't seem to take image boundaries into account:

• If the focus point is very close to the border, the crop may include areas outside of the image, and create a black stripe:

• The opposite happens when the crop is narrow, the crop doesn't always include the focus point when it is near the side. Here I think I should see the corner of the image, including the whole black bag at the bottom?
  

https://github.com/flokosiol/kirby-focus/blob/master/fields/focus/assets/css/focus.css#L2

When I set translate: false for this field; it works as expected in the default language.

As soon as you're in another language, the UI seems to work, but it's not getting saved to the textfile.
I would expect the UI not work and be semi opaque as the default behaviour then is.

i'm getting a Using $this when not in object context in the panel. The focus Field was working before. I'm on the latest Kirby nightly.

Make a list of websites using Kirby Focus.

Thank you very much for your field! It is a nice addition to the Kirby universe. 👍

I wanted to ask if it is normal for non-image fields to show a broken focus field? Maybe we can hide the field based on the supported mime types?

If the image is horizontal and cropped to a vertical format, the thumb is correct with 'gd' but not with 'im'.
In the image below, the left one with 'im' has the expected dimensions, the right one was generated using 'gd'.

Some file names do not seem to work and no target setting picture is shown.
E.g. Photo%20Juni%2025%2C%2010%2046%2039.jpeg
Might be related to spaces.

Daniel

Hi @flokosiol - first of all thanks for providing this plugin -
Is there also a way to use presets with focusSrcset(), analog to:

<?= $image->focusPreset('square') ?>
<?= $image->focusPreset('rectangle') ?>

?
I need to ask, because it's not mentioned in the docs...

I followed the install guide for this plugin. In my blueprint I can add the focus field type. No errors so ar. But when I load the webpage, I only get a white space. No errors at all.
I'm using the kirby content builder, but without this it also doesn't work.
Used several install methods, none of seem to work. Kirby version: 3.1.3

Do I

miss something?

https://gist.github.com/vinkla/dca76249ba6b73c5dd66a4e986df4c8d

I tried kirby-focus on a fresh starterkit, and got this error when I tried to edit an image (at URL /panel/pages/projects/project-b/file/mountains․jpg/edit):

The focus field is missing. Please add it to your installed fields or remove it from your blueprint

Looking at line 12, it seems the field path fails to register for some reason.

Also the previews are not generated when I set c::set('thumbs.driver', 'focus');

… like 'grayscale' as described here.

Hi!
I am building a crop plugin by extending the Darkroom Classes as you do. But I struggled over your code here:

// index.php line 14
Kirby\Image\Darkroom::$types['gd'] = 'Flokosiol\Focus\GdLib';
Kirby\Image\Darkroom::$types['im'] = 'Flokosiol\Focus\ImageMagick';

You are forcing everyone to use your classes and you still allow them to be overwritten by another plugin. If my plugin was loaded after yours, these two variables get overwritten by mine and your plugin does not work anymore in some cases.

To avoid these sideeffects I suggest to move the two lines inside the focusCrop method.

I'm currently trying out your package and it looks really good. One challenge I found is to give the user a correct preview of a Block component. The image is added into the Vue component of my panel plugin, but this image is not respecting the focus point or any size. That is comprehensible, but I wonder how can we achieve this.

Do you already think about that feature? Or did I missed thing?

Thank you for your effort 👍

Not sure if this works as expected but I figured that focusCrop does not work with srcset.

This works:

<?php foreach ($page->children()->listed() as $member): ?>
    <?= $member->image()->focusCrop(300, 400)->url(); ?>
<?php endforeach ?>

This does not...

<?php foreach ($page->children()->listed() as $member): ?>
    <?= $member->image()->focusCrop(300, 400)->srcset(); ?>
<?php endforeach ?>

This code is based on https://getkirby.com/docs/reference/panel/samples/team

Currently you have to specify 2 parameters (height and width) in order to generate a thumbnail with focusCrop.

In kirby you can do something like: echo thumb($image, array('width' => 1920)) and kirby will take the image ratio into account and calculate the proper height.

With focus crop you can just do this: echo $image->focusCrop(200); which will crop a square. Is there a possibility to get something like focusCrop(200, auto) ? For me I almost always just use the width parameter for my thumbnail generations without a height so I can't use your plugin then in those cases.

Hi Flo. Thanks for a really great plugin.
Could this be adapted into a crop field without too much trouble? Would be a lifesaver :)

It would save two coordinate-pairs instead of one, and have accompanying methods to perform the crop. Maybe, it could be one plugin with both features available… First you choose your focal point, then you drag around a crop box (which is only permitted to contain the focal point within its bounds). The crop box ratio could be specified as an option.

What do you think?

Since 3.0.2 I get an error: 'Invalid field type ("focus")'; After downgrade to 3.0.1 it's working again.

I'm sorry to bother you again. I just tried to use your plugin on a Kirby 3 installation on a linux machine and the autoloader was unable to load core/focus.php. After I changed the filename to Focus.php the problem was gone.

Plugin throws the following issue when using focusSrcset in a template or controller:

 Whoops \ Exception \ ErrorException (E_DEPRECATED)
Non-static method Flokosiol\Focus::focusSrcset() should not be called statically

The line in the plugin causing it is line 70:

        'focusSrcset' => function ($sizes = null) {
            return Flokosiol\Focus::focusSrcset($this, $sizes);
        },

Observed in Kirby 3.3.2 running on PHP 7.2

Hi @flokosiol !
Your last commit broke something.
Please have a look at:
https://github.com/flokosiol/kirby-focus/blob/master/methods/file.php#L69

The last argument should be a y not x.
This leads to incorrect behavior as it only reads the width, not the height.

btw. I really like your plugin, keep up the good work.