WackoWiki

View source for Re: Open Graph protocol integration

We working on the topic, but it will take some time to read the sources, look how it is done elsewhere, evaluation, think about it, test and rethink it again. 

I already thought about a short time hack, until we have a general solution:
A temporary hack for the external image (Does not update the image once written!):

%%(hl sql) ALTER TABLE `wacko_page` ADD `image` VARCHAR(255) NOT NULL AFTER `keywords`; %%
%%(hl diff)
diff --git a/src/theme/_common/_header.php b/src/theme/_common/_header.php
index 5b1ba32..143e49e 100644
--- a/src/theme/_common/_header.php
+++ b/src/theme/_common/_header.php
@@ -30,6 +30,29 @@
 {
 	$tpl->page_keywords		= $this->get_keywords();
 	$tpl->page_description	= $this->page['description'] ?? null;
+
+	// Open Graph protocol
+	if (empty($this->page['image']))
+	{
+		// parse first image into page table
+		preg_match('#(http(s)?):\/\/([^\s\"<>]+)\.(avif|gif|jpg|jpe|jpeg|png|svg|webp)#', $this->page['body'], $match);
+		$this->page['image'] = $match[0] ?? null;
+
+		if ($this->page['image'])
+		{
+			$this->db->sql_query(
+				"UPDATE " . $this->db->table_prefix . "page SET " .
+					"image		= " . $this->db->q($this->page['image']) . " " .
+				"WHERE page_id = " . (int) $this->page['page_id'] . " " .
+				"LIMIT 1");
+		}
+	}
+
+	$tpl->og_title			= $this->page['title'];
+	$tpl->og_type			= 'article';
+	$tpl->og_url			= $this->href('', $this->tag, null, null, null, null, null, true);
+	$tpl->og_image			= $this->page['image'];
+	$tpl->og_description	= $this->page['description'] ?? null;
 }
 
 if ($this->db->allow_x11colors)
diff --git a/src/theme/_common/_header.tpl b/src/theme/_common/_header.tpl
index ada1846..4e06184 100644
--- a/src/theme/_common/_header.tpl
+++ b/src/theme/_common/_header.tpl
@@ -16,6 +16,14 @@
 		<meta name="description" content="[ ' description | e ' ]">
 	=]
 	<meta name="language" content="[ ' lang ' ]">
+	[= og _ =
+		<meta property="og:title" content="[ ' title | e ' ]">
+		<meta property="og:site_name" content="[ ' db: site_name | e ' ]">
+		<meta property="og:type" content="[ ' type | e ' ]">
+		<meta property="og:url" content="[ ' url | e ' ]">
+		<meta property="og:image" content="[ ' image | e ' ]">
+		<meta property="og:description" content="[ ' description | e ' ]">
+	=]
 	<link rel="stylesheet" href="[ ' db: theme_url ' ]css/default.css">
 	<link rel="stylesheet" href="[ ' db: theme_url ' ]css/wacko.css">
 	[= x11 _ =

%%

The goal is to parse it only once when the page is saved and store the result in the page table, to load the image with ##$this->page##. 

Now we have two cases, you might have an external image as well as an attached image.
  a. ##~https://example.com/article_thumbnail.jpg##
  a. ##~file:/article_thumbnail.jpg##

Additionally we want a flexible solution for the description, it can be a text snippet from ##$this->page['body']## or just ##$this->page['description']##.

I already looked how it is done in MediaWiki and DokuWiki. None of them deal with external images.
  * https://www.mediawiki.org/wiki/Extension:PageImages
  * https://www.mediawiki.org/wiki/Extension:TextExtracts
  * https://www.dokuwiki.org/plugin:semantic

And we want some configurable parameters for the description and the image output.

[... more edits upcoming]

Tools:
  * https://regex101.com/