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 .
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!
The hook should actually directly save the thumbs in the media folder (with the ->save(); part), does the hook do anything at all?
Ok, sometimes I should check the obvious things first:
I had the hook insde ‘thumbs’ => []
Thanks for the “hint” =)
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.
Have you tried to delete the /media folder after making the change? Also clear your browser cache.
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?
Yes, Kirby does that, it doesn’t normally regenerate existing thumbs
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:
-
Enhanced Toolbar Link Dialog from @gearsdigital
-
Filesize > Rounds the Filesize to show in a Download-Icon
- 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.
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:
<?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];
}
]
]);
Do you also run into this issue if you remove the first plugin but one of the other two?
1 Like
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:
lock.json after the image:
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
projekte+test20.json:
"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) :
And then it keeps generating those GET requests:
I’m sorry for all the Screenshots. I really need to understand all those requests better, still learning …
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. =)
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.
