# Headless generate thumbs on upload

**URL:** <https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852>\
**Category:** Questions\
**Tags:** v3\
**Created:** [July 12, 2021, 2:10pm UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852 "2021-07-12T14:10:35Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mirkokokoko](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mirkokokoko/32/15658_2.png) [@Mirkokokoko](https://forum.getkirby.com/u/Mirkokokoko)\
**Post date:** [July 12, 2021, 2:10pm UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/1 "2021-07-12T14:10:35Z")

</div>

I use Kirby as a Headless CMS and grab all the content via content representation (json-files).  
Now I realised, if I upload an Image and go to this page via Frontend-Link, no images show up. Only when I refresh the Page in the Frontend, the Images seems to get generated and displayed.

Now I was thinking about generating all resized images for my srcset when uploading the files. I tried this with this [Hook](https://forum.getkirby.com/t/generating-thumbs-on-upload/12514/2) .

But at the moment this doesn’t work.

After a lot of reading about similar topics in the Forum, I am a bit lost.  
What I found out and could be the Problem:

The .json files in the .jobs folder (inside media folder, for the different file-sizes) only get generated, when I call the json-representation of the page one time in the Browser.  
Does the hook need those files (json inside .jobs) to work? If so, how could I generate them directly when uploading an image?

Thank you for every hint in the right direction!

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [July 12, 2021, 2:23pm UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/2 "2021-07-12T14:23:45Z")

</div>

The hook should actually directly save the thumbs in the media folder (with the `->save();` part), does the hook do anything at all?

---

<div class="post-metadata">

**Author:** ![Mirkokokoko](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mirkokokoko/32/15658_2.png) [@Mirkokokoko](https://forum.getkirby.com/u/Mirkokokoko)\
**Post date:** [July 12, 2021, 2:45pm UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/3 "2021-07-12T14:45:52Z")

</div>

Ok, sometimes I should check the obvious things first:  
I had the hook insde ‘thumbs’ =\> []

Thanks for the “hint” =)

---

<div class="post-metadata">

**Author:** ![Mirkokokoko](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mirkokokoko/32/15658_2.png) [@Mirkokokoko](https://forum.getkirby.com/u/Mirkokokoko)\
**Post date:** [July 13, 2021, 2:26pm UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/4 "2021-07-13T14:26:47Z")

</div>

Oh no, that wasn‘t the only problem.

Now I realised the following:

- The Thumbs are all generated during the Upload as they should.

- The Image doesn’t show up, when visiting the Page the first time. \> The URL directs to a new folder inside media/pages/projectname/

- So when visiting the Page, a exactly the same Thumbs are generated again, but inside the new folder

- The same Problem exists in the Panel. The Image (Card Layout) only appears after refreshing the page.

Some more context which maybe has something to do with the Problem:  
I had the same setup before, but with GD as Image driver. Now I had to switch to IM. Before the loading of the Images wasn’t a problem at all. Even if the got generated during the visit, they showed up, as soon as possible. Now I really need to refresh the page to display them.

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [July 13, 2021, 2:48pm UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/5 "2021-07-13T14:48:35Z")

</div>

> [@Mirkokokoko](#):
>
> The Image doesn’t show up, when visiting the Page the first time. \> The URL directs to a new folder inside media/pages/projectname/

Have you tried to delete the `/media` folder after making the change? Also clear your browser cache.

---

<div class="post-metadata">

**Author:** ![Mirkokokoko](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mirkokokoko/32/15658_2.png) [@Mirkokokoko](https://forum.getkirby.com/u/Mirkokokoko)\
**Post date:** [July 13, 2021, 3:12pm UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/6 "2021-07-13T15:12:38Z")

</div>

Yes I already tried that. But no luck with that.

I am wondering, why kirby generates a new set of thumbs even though the images already exist. Shouldn’t Kirby first check if they already exist?

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [July 13, 2021, 3:20pm UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/7 "2021-07-13T15:20:52Z")

</div>

> [@Mirkokokoko](#):
>
> Shouldn’t Kirby first check if they already exist?

Yes, Kirby does that, it doesn’t normally regenerate existing thumbs

---

<div class="post-metadata">

**Author:** ![Mirkokokoko](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mirkokokoko/32/15658_2.png) [@Mirkokokoko](https://forum.getkirby.com/u/Mirkokokoko)\
**Post date:** [July 14, 2021, 8:40am UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/8 "2021-07-14T08:40:50Z")

</div>

Ok. Fresh in the morning I tried to figure out what I’ve changed since the time it worked fine.

Since then I have 3 plugins included:

1. [Enhanced Toolbar Link Dialog](https://github.com/gearsdigital/enhanced-toolbar-link-dialog) from @gearsdigital
2. [Filesize](https://forum.getkirby.com/t/how-to-get-file-size/19504/14) \> Rounds the Filesize to show in a Download-Icon
3. Internal-link \> To get the right internal link in my headless setup, i overwrite the link tag. I tried this with the help of [this](https://forum.getkirby.com/t/overwriting-the-kirbytext-link-tag/13247).

With only the 1. Plugin running, the Images get loaded as they should. No refresh necessary in the Panel or in the Frontend.  
As soon as one of the other Plugins is running, the problem appears.

I never really used Plugins and since only the complete package from the 1. Plugin works, I think I did something wrong with implementing them? Still, I don’t get how this would be problematic for loading the Images (in the Panel and in the Frontend)?

This would be the filesize (site/plugins/filesize/index.php) example:

```auto
<?php
Kirby::plugin('mirkokokoko/filesize', [
    'fileMethods' => [
        'customSize' => function() {
            // file mode
            $size = (int) static::size($this->path());
        
            // avoid errors for invalid sizes
            if ($size <= 0) {
                return '0 KB';
            }
            // the math magic
            return round($size / pow(1024, ($i = floor(log($size, 1024)))), 1) . ' ' . F::$units[$i];
        }
    ]
]);

```

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [July 14, 2021, 8:54am UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/9 "2021-07-14T08:54:11Z")

</div>

Do you also run into this issue if you remove the first plugin but one of the other two?

---

<div class="post-metadata">

**Author:** ![Mirkokokoko](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mirkokokoko/32/15658_2.png) [@Mirkokokoko](https://forum.getkirby.com/u/Mirkokokoko)\
**Post date:** [July 14, 2021, 9:41am UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/10 "2021-07-14T09:41:44Z")

</div>

Yes. The 2. and 3. seem to create the Problem. Also if they are the only ones in the plugins folder.

When I check the uploaded Image in the Network Tab, the Headers of the Image look the same when the it is loaded or not loaded.

This is how it looks when the image gets loaded. (With no Plugins or only the 1. running):

The uploaded image:

 ![Bildschirmfoto 2021-07-14 um 11.18.05](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/f/fa4ac2168e06169b421dbc53f0ac7f718dd58519.png)

lock.json after the image:

 ![Bildschirmfoto 2021-07-14 um 11.18.12](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/de08397a1760ba22840e08b495087bb29ad50a52.png)

Here you can see the failed Image (9883316226-c5f9bb75f0-o-1408x.jpg).  
Then below the lock file which looks the same as the one which you see above. But then there is this _projekte+test20.json_

 ![Bildschirmfoto 2021-07-14 um 11.26.08](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/5/54219f5aaa70e073cc5dd64e52a9e083ed16476f.png)

projekte+test20.json:

```auto
"status": "error",
"message": "Unauthenticated",
"code": 403,
"exception": "Kirby\\Exception\\PermissionException",
"key": "error.permission",
"file": "/kirby/config/api/authentication.php",
"line": 11,
"details": [],
"route": "pages/([a-zA-Z0-9\\.\\-_%= \\+\\@\\(\\)]+)"

```

After this _projekte+test20.json_ there is another _lock.json_  
(x-http-method-override changed from PATCH to DELETE) :

 ![Bildschirmfoto 2021-07-14 um 11.34.08](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/1/18fa390ff7d49b39f4f9149b361efaaa577c3726.png)

And then it keeps generating those GET requests:

 ![Bildschirmfoto 2021-07-14 um 11.38.03](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/a/a9a09b701310a932afb3f3474c04bf143ed71924.png)

I’m sorry for all the Screenshots. I really need to understand all those requests better, still learning …

---

<div class="post-metadata">

**Author:** ![Mirkokokoko](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mirkokokoko/32/15658_2.png) [@Mirkokokoko](https://forum.getkirby.com/u/Mirkokokoko)\
**Post date:** [July 14, 2021, 10:38am UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/11 "2021-07-14T10:38:46Z")

</div>

Oh Wow. Maybe now I got it:

In both Plugins (2. and 3.) I had the starting _\<?php_ on the second line with one empty line above.  
When removing this empty line in both files it works.

The initial problem, that the File-Generating-Hook generates a Media-Folder and when visiting the Page a second Folder with the same thumbs gets generated still exists.  
But since this was more of a hacky try to solve the loading issue, I just remove this hook again and generate the images as supposed during the page view.

Thank you @pixelijn for accompanying while searching for the problem. =)

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [July 14, 2021, 10:43am UTC](https://forum.getkirby.com/t/headless-generate-thumbs-on-upload/22852/12 "2021-07-14T10:43:24Z")

</div>

> [@Mirkokokoko](#):
>
> I had the starting _\<?php_ on the second line with one empty line above.

Glad you found the issue. Yes, your opening PHP tag should always be on the first line (when the file starts with PHP code), with no preceding whitespace or other invisible characters.