kirby-meta-knight icon indicating copy to clipboard operation
kirby-meta-knight copied to clipboard

Lazy image processing seemingly causes problems with share previews

Open fabianmichael opened this issue 3 years ago • 1 comments

One of my clients had the problem, that images often did not show up correctly, when a link was shared on social media and messaging apps. It seems like that it related to the way how Kirby processes images. When a template generates a thumbnail, Kirby just creates a job-file in the media folder. The actual thumbnail is only generated, once the first HTTP request is made. This is great, because it prevents a server from crashing if a page contains a lot of thumbnails. On the flip side, this first request will take quite long and the response headers are different from when the server serves the static image. We tried to circumvent this issue by forcing Kirby into generating the thumbnail right-away. This can easily be done by querying and property, that can only be retrieved from the final image, such as the file size:

<?php if ($og_image = $page->og_image()->toFile() ?? $site->og_image()->toFile()): ?>
  <meta property="og:image" content="<?= $og_image->thumb($og_image_thumb)->url() ?>">
  <meta property="og:width" content="<?= $og_image->thumb($og_image_thumb)->width() ?>">
  <meta property="og:height" content="<?= $og_image->thumb($og_image_thumb)->height() ?>">
  <?php $og_image->thumb($og_image_thumb)->size() ?>
<?php endif; ?>

The fix has only happened a few days ago, so we need to see if it really works. Just wanted to open this issue already in case, that anyone else came across this problem. Will add a comment, if the issue persists on our end.

fabianmichael avatar Jul 07 '21 08:07 fabianmichael

Thanks for bringing this up and providing such a thorough explanation @fabianmichael. I'd love to hear if the workaround you came up with fixes the issue reliably. If that is the case I'll try to add it to the plugin as quickly as possible.

jonathanmuth avatar Jul 07 '21 13:07 jonathanmuth