Blog, cover images & social media

Kirby 3 Solved ✅
1

Hi everybody,

does anybody know how social media find out the cover images of articles? I’ve got a site running Kirby, including a small blog, all self-made based on plainkit. When pasting links into posts, no images show up (which is better than wrong ones but not ideal yet).

If somebody has pointers to good articles, I would appreciate that. My personal Wordpress seems to cover that in some inline JSON, but given that I’m doing law in general and creating the site is only a side project, I’d rather find some how-to than to deep-dive into such code. If necessary, I’ll do that sometime later, though.

Best
Baltasar

2

Hi Baltasar,

you have to use OpenGraph-Tags and/or twitter cards for that. There are a lot of possibilites. I have an extra blueprint-section for all the needed fields Here is how my snippet looks like: https://gist.github.com/mauricerenck/bd36f656390e0c64bbe92d2a3ed6a3f6 I use it within <head></head> You have to change the fields according to your setup then it should work for you. You can see it in action here: https://maurice-renck.de/de/blog/indiewtf just have a look at the source.

The inline JSON you mean, might be JSON-LD which is read by google and other tools using schema.org syntax. You can see an example of that in the source of my page, too.

Hope that help

3

You can do it pretty easily with the Metatags plugin. This will also do JSON stuff.

here are my rules. I have a facbook and twitter image field on every page. I also have them in the site.yml and as an absolute fallback, some generic images in the assets. It checks the page, if thats empty it uses the generic ones in site.yml… if thats empty it pulls images directly from the asets folder as a last resort.

I use the focusCrop plugin too but can swap that for crop() or resize() if you dont want that.

'og' => [
    'image' => function ($page) {
        $image = $page->facebookimage()->toFile();
        if ($image) {
            return $image->focusCrop(1280, 720)->url();
        } else {
            $image = site()->facebookfallback()->toFile();
            if ($image) {
                return $image->focusCrop(1280, 720)->url();
            } else {
                $image = new Kirby\Image\Image('/assets/images/facebook.jpg');
                return $image->root();
            }
        }
    },

],
'twitter' => [
    'card' => 'summary_large_image',
    'image' => function ($page) {
      if ($image = $page->twitterimage()->toFile()) {
        return $image->focusCrop(1280, 720)->url();
      } else {
          $image = site()->twitterfallback()->toFile();
          if ($image) {
              return $image->focusCrop(1280, 720)->url();
          } else {
              $image = new Kirby\Image\Image('/assets/images/twitter.jpg');
              return $image->root();
          }
      }

    },

],
4

Oh cool, thank you both very much. That all sounds doable, I will have a look at the details these days!