How can I echo the url of the image from a page or posts in the header for twittercard or opengraph?

Heja,

i need your support!

How can I echo the url of the image from a page or posts in the header for the meta information for the twittercard or opengraph.

<meta property="og:image" content=" " />  
<meta name="twitter:image" content=" ">

How can i echo the different images for a page and posts. I use for both the field coverimage().

I use the blogprint plugin for the blog.

Thanks for help!

Try this:

<meta property="og:image" content="<?php echo $page->image($page->coverimage())->url ?>" />  
<meta name="twitter:image" content="<?php echo $page->image($page->coverimage())->url ?>">

Don’t forget to check if the image exists first:

<meta property="og:image" content="<?php if($image = $page->coverimage()->toFile()) echo $image->url() ?>" />  
<meta name="twitter:image" content="<?php if($image = $page->coverimage()->toFile()) echo $image->url() ?>" />
```

Can i use this for pages and posts?

There’s no difference between pages and post in Kirby, $page usually refers to the current page (if not otherwise defined).

Yes! It work’s! Thank you texnixe :slight_smile:

I’ll directly jump into this topic. The solution above doesn’t fix Twitter cards for me, as I’m not using cover images. Is there also a way to use just the first image embedded in a article?

And, whats the way to put a excerpt into the “description” of the Twitter card meta tag? I tested the following (somehow very obvious) but it directly crashed the site:

<?php echo excerpt($article->text(), 300) ?>

Thanks for helping me out :slight_smile:

To get the first image in a folder (not the one already included in an article)

<?php
$image = $page->image();
// which is the same as
$image = $page->images()->first();

Excerpt:

<?= $page->text()->excerpt(300) ?>

Thanks Texnixe! The excerpt is working like a charme. But the img-tag keeps empty. Tried both of them:

<?php $image = $page->image() ?>
<?php $image = $page->images()->first() ?>

Any idea?

Could you post your code?

You would have to check if the image exists and if so, echo the url of the image

<?php if($image = $page->image()) { echo $image->url(); } ?>

Ahhhhh… with that snippet its working. You are wonderful :smile:

Maybe you can also help with the excerpt - I just need a little tweak: Is there a way to check IF there is text inside the post, and if not take the post title as description (instead of the text excerpt)? I often publish just a picture with a only a subject line.

Sure:

<?php
if($page->text()->isNotEmpty()) {
  echo $page->text()->excerpt(300); 
} else {
  echo $page->title()->html();
}
?>

Thanks for the snippet, works for standard articles (with text). Unfortunately it doesn’t work for posts with not text and with a embedded image. IMHO thats because the image is part of the text, so that the text isn’t empty. Could that be the cause?

Yes, exactly, if there is anything in the field, it is not empty.

Alternative:

<?php
if(! $page->text()->excerpt(300) == '') {
   echo $page->text()->excerpt(300); 
} else {
   echo $page->title()->html();
}
?>

The excerpt method will return an empty string if there’s only an image kirbytag in it.

1 Like

Thanks Texnixe, that solved the problem. You are awesome :grinning:
Just in case, somebody else wants to use this snippet, there need to be done a small correction (you missed the } before the else).

<?php
if(! $page->text()->excerpt(300) == '') {
   echo $page->text()->excerpt(300); 
} else {
   echo $page->title()->html();
}
?>

I would just like to point out that theres a good plugin for this that is very powerful. Meta Tags Plugin

If you still want to do it by hand then maybe using the code i used prior to finding the plugin might help… you can add your image stuff to it. Does require a couple of extra blueprint entries to capture SEO title & description and keywords:

<?php if ($page->isHomePage()): ?>

<title><?= $site->seotitle()->html() ?></title>
<meta name="description" content="<?= $site->seometa() ?>">
<meta name="keywords" content="<?= $site->seokeywords() ?>">
<link rel='canonical' href='<?= $site->url() ?>' />
<meta property='og:site_name' content='<?= $site->title()->html() ?>' />
<meta property='og:title' content="<?= html($site->title()) ?>" />
<meta property='og:url' content="<?= $site->url() ?>" />
<meta name='twitter:card' content='summary' />
<meta name='twitter:title' content="<?= html($site->title()) ?>" />
<meta name='twitter:description' content="<?= $site->seometa() ?>" />
<meta name='twitter:url' content="<?= $site->url() ?>" />

<?php else: ?>

<title><?= html($site->seotitle().' | '.$page->seotitle()) ?></title>
<meta name="description" content="<?= $page->seometa() ?>">
<meta name="keywords" content="<?= $page->seokeywords() ?>">
<link rel='canonical' href='<?= $page->url() ?>' />
<meta property='og:site_name' content='<?= $site->title()->html() ?>' />
<meta property='og:title' content="<?= html($site->seotitle().' | '.$page->seotitle()) ?>" />
<meta property='og:url' content="<?= $site->url() ?>" />
<meta name='twitter:card' content='summary' />
<meta name='twitter:title' content="<?= html($site->title().' | '.$page->seotitle()) ?>" />
<meta name='twitter:description' content="<?= $page->seometa() ?>" />
<meta name='twitter:url' content="<?= $page->url() ?>" />

<?php endif ?>

Does anyone have a suggestion for adding a condition for a Twitter Image?
For instance if an image is not found for a page use a default image from NAMED URL.
I can’t seem to get this to work consistently.

Something like this
<meta name="twitter:image" content="<?php if(! $page->image()) { echo $image->url(); } else { echo 'DEFAULT IMAGE URL' ?>" />

Thanks,

The $image variable is missing and the not operator works the wrong way round here, so this should work:

<meta name="twitter:image" content="<?php if($image = $page->image()) { echo $image->url(); } else { echo 'DEFAULT IMAGE URL'; } ?>" />

Thank you,

Sorry I thought I fixed my syntax on the original post, but it looks like I deleted my corrected post by accident. You are right I got the not operator all wrong.