Giter Club home page Giter Club logo

Comments (26)

flokosiol avatar flokosiol commented on May 28, 2024 2

I just released 3.1.0 and hope I configured the version numbers and dependencies correctly.

from kirby-focus.

lukasbestle avatar lukasbestle commented on May 28, 2024 1

@flokosiol Since you don't extend our core drivers but the general Darkroom class, your drivers don't need to be perfectly in sync with ours. If there were any breaking changes for plugin devs, we would communicate that in the release notes.

from kirby-focus.

HashandSalt avatar HashandSalt commented on May 28, 2024 1

@flokosiol Awsome :) Just tested it and everything seems good now on IM

image

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024 1

Thanks a lot for testing! Unfortunately the grayscale version does not work yet. I totally missed that, too.

Nevertheless the main work is done and I can release 3.1.0 for K3.6+ soon. 👍

from kirby-focus.

renestalder avatar renestalder commented on May 28, 2024

@flokosiol Are you able to reproduce it? I am currently having to pin the plugin in all websites to the 3.0.7 release as of my CI/CD automation automatically update patch versions, and therefore breaking websites with 3.0.8.

I tried to look at your code changes to get a sense of what could go wrong, but I don't exactly see how your changes lead to that result.

from kirby-focus.

HashandSalt avatar HashandSalt commented on May 28, 2024

Seeing this too :(

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024

Thanks for the reminder. I set up a test installation (which I hopefully will extend furthermore). Could you please check out if this works for you?

https://github.com/flokosiol/kirby-focuskit

For me everything worked fine with this installation, but it's based on the plainkit (which has no public folder setup) and I couldn't get avif files to work at all. At least the generated webp files have been saved to the correct media subfolder. So maybe we can use this as a starting point?!

screenshot-focuskit

from kirby-focus.

HashandSalt avatar HashandSalt commented on May 28, 2024

I am not getting the srcset images at all with that.

image

In my test i used the Starter kit and switched the album.php template to use the plugin.

from kirby-focus.

HashandSalt avatar HashandSalt commented on May 28, 2024

Like this:

<?php
/*
  Templates render the content of your pages.

  They contain the markup together with some control structures
  like loops or if-statements. The `$page` variable always
  refers to the currently active page.

  To fetch the content from each field we call the field name as a
  method on the `$page` object, e.g. `$page->title()`.

  This example template makes use of the `$gallery` variable defined
  in the `album.php` controller (/site/controllers/album.php)

  Snippets like the header and footer contain markup used in
  multiple templates. They also help to keep templates clean.

  More about templates: https://getkirby.com/docs/guide/templates/basics
*/
?>
<?php snippet('header') ?>
<article>
  <?php snippet('intro') ?>
  <div class="grid">

    <div class="column" style="--columns: 4">
      <div class="text">
        <?= $page->text() ?>
      </div>
    </div>

    <div class="column" style="--columns: 8">
      <ul class="album-gallery">
        <?php foreach ($gallery as $image): ?>
        <li>
          <a href="<?= $image->url() ?>" data-lightbox>
            <figure class="img" style="--w:<?= $image->width() ?>;--h:<?= $image->height() ?>">
         
                <picture class="item-class">
                <source srcset="<?= $image->focusCrop(800, null, ['format' => 'avif'])->url()?>" type="image/avif">
                <source srcset="<?= $image->focusCrop(800, null, ['format' => 'webp'])->url()?>" type="image/webp">
                <img src="<?= $image->thumb(['width' => 800, 'height' => null, 'format' => $image->extension()])->url() ?>" alt="<?= $image->alt() ?>">
                </picture>

            </figure>
          </a>
          
        </li>
        <?php endforeach ?>
      </ul>
    </div>

</article>
<?php snippet('footer') ?>

from kirby-focus.

HashandSalt avatar HashandSalt commented on May 28, 2024

With that i get i get the thumbs in the webroot with names like

last-tree-standing-800x800-crop-50-50.avif.avif

and only Avifs... no webps... i think it uses the first thing in the source list and ignores the rest.

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024

Thanks for the quick reply.

Maybe it's an GD vs. ImageMagick thing. I used GD version 2.3.3 for my tests and just learned that it doesn't support AVIF at all until PHP 8.1.

I will try to get IM up and running and test it again. What do you use?

from kirby-focus.

lukasbestle avatar lukasbestle commented on May 28, 2024

So does this only happen with ImageMagick or also with GDLib? If only with ImageMagick, I suspect that something could be off with the command line arguments.

from kirby-focus.

renestalder avatar renestalder commented on May 28, 2024

I mean, I never tried with GD. To my knowledge, or that's what I read when Kirby added support for it is, that only ImageMagick supports AVIF. That said, I always used ImageMagick then. But for sure, the issue doesn't apply when "Kirby Focus" isn't used.

from kirby-focus.

HashandSalt avatar HashandSalt commented on May 28, 2024

Just to confirm, im using IM as the image driver.

from kirby-focus.

HashandSalt avatar HashandSalt commented on May 28, 2024

Oh and i discovered that Kirby generates on access and on browser support. If you knock out the avif line so you just have source tags for webp and jpg, you will get webps. Adjust the browsers window size and you get the other sizes too.

from kirby-focus.

lukasbestle avatar lukasbestle commented on May 28, 2024

I feel like the issue could be coming from these lines:

if ($options['format'] !== null) {
$file = basename($file) . '.' . $options['format'];
}

It would simultaneously explain the images being stored in the root and also the double extension.

@flokosiol I'd also recommend using escapeshellarg() for the dynamic arguments for added security and reliability. We've updated the core driver recently.

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024

That's what I thought, too. The image driver need to be in sync with Kirby core – with a few additional focus specific lines of code. I'm pretty sure this can be fixed with a re-sync of the IM driver.

I'll have a look at this. Thanks for your investigation and your patience.

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024

I updated the IM driver for the kirby-focuskit but WITHOUT ANY SINGLE TESTING, because I need to setup ImageMagick on my machine first. But if I didn't introduce any syntax errors, this might already be the solution.

You can either check this untested thing or wait until I set up IM locally and test it myself :)

Does anyone know if it's possible to watch files on Github? Would be awesome, if I could kind of subscribe to get a notification from Github as soon as the two files change in Kirby core.

from kirby-focus.

renestalder avatar renestalder commented on May 28, 2024

I mean, you could watch composer dependencies (pointing to the Kirby dev branch directly) with Dependabot or Renovate and automatically test those in GitHub Actions or with Docker images. At least, that's how my setup is with websites: Checking for new dependencies with Renovate every night, then automatically update those dependencies on a branch and make docker builds to test them. Probably kind of a stretch for what you want.

from kirby-focus.

HashandSalt avatar HashandSalt commented on May 28, 2024

@flokosiol ok so some progress with your tweaked driver - GD is working fine, with IM the images are now ending up in the media folder BUT no cropping is happening.

image

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024

@HashandSalt Thanks for testing. Obviously, changing code blindly is not the best option. I will install IM on my machine and test it propperly 😉

@lukasbestle Thanks for the info!

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024

Hey folks. I think I fixed it for the https://github.com/flokosiol/kirby-focuskit/
Would be awesome if someone could confirm this. Afterwards I would update the plugin and publish it as 3.1.0 here.

Thanks for your patience!

from kirby-focus.

renestalder avatar renestalder commented on May 28, 2024

Can those people that tested this confirm, that the AVIF file is really an AVIF file and not just a renamed JPG? I just checked the new version, set the focus point on an image, used by overcomplicated Twig macros to render it and checked with Google Lighthouse. The performance stats gave me a warning that I should use next gen image formats. The AVIF file triggers that warning. When I download the AVIF file, it appears as a JPG on my local file system.

I suspect there is something wrong in the AVIF conversion, which I never had before without the focus plugin. I might have to dig a bit deeper to confirm this is not because of my setup or config, but it would be good if anyone having the new version running with AVIF could check too.

I gladly create a new issue for that as soon as I can confirm that it's indeed an issue caused by the plugin.

Still, possible this is an issue on my end or in Kirby itself.

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024

I added an AVIF test case to the FocusKit test setup and updated to the latest versions of Kirby and Focus.
https://github.com/flokosiol/kirby-focuskit

For me everything seems to be fine with the generated AVIF files. Strange. @renestalder

from kirby-focus.

renestalder avatar renestalder commented on May 28, 2024

@flokosiol Thanks a lot for taking the time for checking. After your check. I pushed the code where this happens to a remote server and there it worked flawlessly, so I suppose there is something broken with my local docker images.

from kirby-focus.

flokosiol avatar flokosiol commented on May 28, 2024

Alright. Thanks a lot for the info!

from kirby-focus.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.