pub / stories

commit 8243ed14bc025ff57de30eb1111e779a11a0c0ef
parent 49994d2284bf5a67c25c01390fbe1282291d0259
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Sat, 31 Oct 2026 14:32:29 +0100

feat: show og:image in article preview

Diffstat:
A
assets/fallback.png
 | 
0

A
assets/js/og_image.js
 | 
17
+++++++++++++++++
M
index.tt
 | 
7
+++++++
A
lib/og_image.php
 | 
26
++++++++++++++++++++++++++

4 files changed, 50 insertions(+), 0 deletions(-)
diff --git a/assets/fallback.png b/assets/fallback.png
Binary files differ.
diff --git a/assets/js/og_image.js b/assets/js/og_image.js
@@ -0,0 +1,17 @@
+async function fetch_og_image(url) {
+  // description response
+  const desc_resp = await fetch (
+    "/lib/og_image.php?url=" + url
+  );
+  // extract text of response
+  var img_url = desc_resp.text();
+  // return url
+  return img_url
+}
+
+function insert_og_image(obj, url) {
+  var src = await fetch_og_image(url);
+  if (src != "") {
+    obj.src = src;
+  }
+}
diff --git a/index.tt b/index.tt
@@ -28,6 +28,7 @@
     <link rel="apple-touch-icon" href="assets/favicon.png">
     <link rel="stylesheet" type="text/css" href="assets/css/simple.min.css">
     <link rel="stylesheet" type="text/css" href="assets/css/custom.css">
+    <script async src="assets/js/og_image.js"></script>
     <link crossorigin="use-credentials" rel="manifest" href="assets/manifest.json">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noindex">
@@ -127,6 +128,12 @@
 
       ?>
       <section>
+        <!-- Head image -->
+        <img
+          src="assets/fallback.png"
+          style="width:100%;height:100%;max-height:250px;object-fit:cover;"
+          onload="insert_og_image(this, '<?php echo $entry['url']; ?>');"
+        >
         <!-- Headline -->
         <h4 style="margin-bottom:5px;">
           <a href="<?php echo $entry["url"]; ?>"
diff --git a/lib/og_image.php b/lib/og_image.php
@@ -0,0 +1,26 @@
+<?php
+
+// Fetch site HTML
+$url = urldecode($_GET["url"]);
+$html = explode(
+    PHP_EOL,
+    file_get_contents($url)
+);
+
+// If HTML could be fetched, extract lines with og:image
+if (!empty($html)) {
+    $image_lines = preg_grep(
+        '/property="og:image"/',
+        $html
+    );
+    $image_url = preg_replace(
+        '/^.*content=("|\')*([^"\' ]+)("|\'")*.*$/',
+        '${2}',
+        $image_lines
+    );
+    $image_url = reset($image_url);
+} else {
+    $image_url = "";
+}
+// return OG Image URL
+echo $image_url;