- Added shared Open Graph/Twitter/canonical metadata rendering in [includes/layout.php](/Users/tyemeclifford/Documents/GH/mediaplayer/includes/layout.php).

The main video page now uses the active video’s:title
description
canonical /v/<slug> URL
thumbnail as og:image / twitter:image
image dimensions when available

The standalone embed page also now emits social metadata using the video 
thumbnail.
This commit is contained in:
Ty Clifford
2026-06-25 08:29:13 -04:00
parent a3aa51c4e2
commit 173fe3917e
3 changed files with 98 additions and 3 deletions
+41 -1
View File
@@ -3,13 +3,53 @@
* layout.php — shared HTML head, header, and footer partials
*/
function render_head(string $title = 'Media — TyClifford.com', string $extra_css = ''): void { ?>
function render_social_meta(string $title, array $meta = []): void {
$site_name = trim((string)($meta['site_name'] ?? setting('site_title', 'Ty Clifford')));
$description = trim((string)($meta['description'] ?? setting('site_sub', 'tyclifford.com / media')));
$type = trim((string)($meta['type'] ?? 'website'));
$url = trim((string)($meta['url'] ?? public_absolute_url($_SERVER['REQUEST_URI'] ?? public_home_url())));
$image = trim((string)($meta['image'] ?? ''));
$image_alt = trim((string)($meta['image_alt'] ?? $title));
$image_width = (int)($meta['image_width'] ?? 0);
$image_height = (int)($meta['image_height'] ?? 0);
$twitter_card = $image !== '' ? 'summary_large_image' : 'summary';
$url = public_absolute_url($url);
if ($image !== '') $image = public_absolute_url($image);
?>
<meta name="description" content="<?= h($description) ?>">
<link rel="canonical" href="<?= h($url) ?>">
<meta property="og:type" content="<?= h($type) ?>">
<meta property="og:site_name" content="<?= h($site_name) ?>">
<meta property="og:title" content="<?= h($title) ?>">
<meta property="og:description" content="<?= h($description) ?>">
<meta property="og:url" content="<?= h($url) ?>">
<?php if ($image !== ''): ?>
<meta property="og:image" content="<?= h($image) ?>">
<meta property="og:image:secure_url" content="<?= h($image) ?>">
<meta property="og:image:alt" content="<?= h($image_alt) ?>">
<?php if ($image_width > 0 && $image_height > 0): ?>
<meta property="og:image:width" content="<?= $image_width ?>">
<meta property="og:image:height" content="<?= $image_height ?>">
<?php endif; ?>
<?php endif; ?>
<meta name="twitter:card" content="<?= h($twitter_card) ?>">
<meta name="twitter:title" content="<?= h($title) ?>">
<meta name="twitter:description" content="<?= h($description) ?>">
<?php if ($image !== ''): ?>
<meta name="twitter:image" content="<?= h($image) ?>">
<meta name="twitter:image:alt" content="<?= h($image_alt) ?>">
<?php endif; ?>
<?php }
function render_head(string $title = 'Media — TyClifford.com', string $extra_css = '', array $meta = []): void { ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= h($title) ?></title>
<?php render_social_meta($title, $meta); ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">