Create srcset thumbs with a hook

Kirby 3 Questions 🤔
#1

Hopefully this is an easy one to solve, but I’m struggeling to understand the media manager due to lack of propper documentation.

I took the autoresize plugin and extendet it to automatically create thumbnails on upload with a hook in the media folder.
It does work, the thumbnails are created by looping through the different sizes and saved to the media folder on upload. But I can’t use them in the frontend.

foreach ($srcset as $width) { 
      if ($file->width() > $width) {
        try {
          $thumb = $file->thumb(['width' => $width ]);
          $thumb->save(null, null, true);
        } catch (Exception $e) {
          throw new Exception($e->getMessage());
        }
      }

What I understand so far, when I upload the image in the panel, the files are created in e.g. the folder 2993879520-1558446294, but this seems to be the thumbs folder for the panel as it gets referenced by the thumbnails there. As soon as I reload the frontend I get a second folder e.g. 2993879520-1558446298 and the thumbs are created, as always on demand in there. This somehow defeats initial idea. :smiley:

How can I put them into the right place to that the src/srcset on the page reference the correct files?

#2

Where exactly are the thumbs created. The media folder has different subfolders for the Panel, for pages and for plugins.

#3

Both folders are created in the the pages subfolder e.g. media/pages/blog/article-title/2993879520-1558446294

#4

Any hints? I still haven’t figured out what exactly is causing this? It might be related to the fact that I create the tumbs with $file->thumb() and the template is using $file->srcset(). But I can’t wrap my head around how the urls are generated and later referenced?

#5

Not really at them moment, I have to think about it. Usually, the thumbs are created when the URL is called in the browser. Those files then obviously get another time stamp than your hook-created files.

#6

But how is the information stored at which timeframe the thumbs got generated so that they can be referenced at a later point in time? As I said I just can’t wrap my head around how the media manager works.

#7

The reason why this happens is that you create the thumbs from the original file rather the resized one. So the thumbs in your hook are created from Image Original and the thumbs when you access the page in the browser from Image Resized, which results in a new timestamp and new URL.

It shouldn’t happen if you create the thumbs from the new file.

Keep in mind that the media folder is not a media manager but rather some kind of cache, not intended to be version controlled or deployed to the server.

#8

Alright, makes sense - so how could I continue to work with the resized image from the autorize hook. $file->thumb() only returns a string, not the file object.

#9

Good question, because you can’t create a thumb from a thumb (file version object), but only from a file object, at least at the moment. So you would have to fetch the resized file from the page, then create the thumbs from that file object again.

#10

Hm, I think I found a solution. I can’t easly acccess the current page object.
So I changed the file.create:after hook and added a simple $file->update() and moved the thumbnail creation to the file.update:after hook. Which seems to execute quite well, the only issue might be that the thumbs now are created everytime the file model gets updated. I could not figure out if there is another hook that is triggered by $kirby->thumb().

How do I load pregenerated thumbnails?
#11

$file->parent() should give you the current page object…?