Hello,
I integrated KeyCDN to a staging site I’m building at the moment, and while it looks like my content images are shown properly in the site, in the kirby panel it looks like this:
What am I doing wrong?
Could you please share the urls for the images in the panel vs the images in the frontend?
What’s your Kirby version?
This is a URL from the frontend:
https://officebroner.fernandaruiz.work/media/site/b061d3f540-1695784366/dump_1.jpg
And this is how the img tag looks on the panel:
<img alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" srcset="officebronerstaging-1f6b2.kxcdn.com/media/site/b061d3f540-1695784366/dump_1.jpg?width=352 352w, officebronerstaging-1f6b2.kxcdn.com/media/site/b061d3f540-1695784366/dump_1.jpg?width=864 864w, officebronerstaging-1f6b2.kxcdn.com/media/site/b061d3f540-1695784366/dump_1.jpg?width=1408 1408w" sizes="(min-width: 30em) and (max-width: 65em) 59em, (min-width: 65em) 88em, 27em">
My Kirby version seems to be 3.9.6.1
Ok, the first uses a different url, but I guess you copied from different sources?
When I try to open one of the srcset urls from the Panel code in a browser, I get the image without issues.
Could you post what you get in the network tab of dev tools for those links when in the Panel?
This is what I get
Regarding different sources, I’m not sure what you mean, I copied the URL from frontend and the other one is when I click on an image file in the panel, i took that from the dev tools
Hello Texnixe, following up on this, I have a deadline and I worry because I’m not experienced with Kirby + CDN
Have you looked at this guide?
Maybe you will find some important tips that will help you to find a solution.
I did a few times! And I still don’t know how to solve it. I have a suspicion it might be the parameters of width of images that Kirby sets by default on thumbs but I’m not sure how to solve it if that is the case, because at the moment I’m not setting any parameters for the frontend images which are showing just fine, it looks like the issue is with the thumbs in the panel
Ok, I managed to test this locally now, following the steps in the recipe and have not encountered any issues with the Panel, as you can see in the screenshot, tested with a Kirby Starterkit 3.9.6.1:
But again, please show the network tab (not console), filtered by images. And check your server and php log files.
I don’t know how to filter by images but this is what I see in the network tab:
Please note that I can see that it’s adding width parameters which I did not set, maybe this is the culprit and this URL actually doesn’t exist?
My staging site URL is https://officebroner.fernandaruiz.work
I think the problem might be that you forgot to enable image processing like described in the recipe? So if normal images and assets are working, but thumbs are not, that is likely the issue here.
I’m afraid I don’t know. As I wrote above, it worked when I tested it, but then I had problems with my test KeyCDN account and am now completely blocked, so cannot verify anymore.
Rather than trying to fix the issue, why not try a different CDN service? Bunny.net is similar to KeyCDN but has more features and costs less. I feel KeyCDN has stagnated as a service.
thank you Neville, will test this out
Now I’m running into another issue with the Cachebuster.php file. I’m once again following the steps 1 by 1 in the article “Kirby loves CDN | Kirby CMS”, I downloaded the cachebuster file from the repo linked in this tutorial and I get the error “Class “Cachebuster” not found”, I ran into this issue in my other attempts with CDN and the only solution I found was to literally paste the cachebuster file content into my cdn plugin file, which is a dirty solution I know. the article is not clear on where I should place this file in order for my index.php file inside the plugins folder to retrieve, I tried adding the fille inside plugins/cdn, plugins root and plugins/cdn/src and nothing works
If you study the plugin structure of the getkirby.com repo, you will see the the Cachebuster.php class lives in a subfolder src in the cdn plugin and is loaded in the index.php of that plugin.
You might as well just copy the whole site/plugins/cdn folder out of the repo into your project.