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


#1

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!


#2

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 ?>">

#3

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() ?>" />
```

#4

Can i use this for pages and posts?


#5

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


#6

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


#7

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:


#8

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) ?>

#9

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?


#10

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(); } ?>

#11

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.


#12

Sure:

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

#13

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?


#14

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.


#15

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();
}
?>

#21

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 ?>

#22

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,


#24

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'; } ?>" />

#25

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.