Add og-image page

This commit is contained in:
Lewis Dale 2023-01-23 10:51:59 +00:00
parent adf5cc7806
commit 5580d4b443
4 changed files with 31 additions and 1 deletions

File diff suppressed because one or more lines are too long

View File

@ -6,6 +6,10 @@
<link type="application/atom+xml" rel="alternate" href="<?php bloginfo('atom_url'); ?>" title="Lewis Dale's Blog" /> <link type="application/atom+xml" rel="alternate" href="<?php bloginfo('atom_url'); ?>" title="Lewis Dale's Blog" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<?php $ogImage = "https://coruscating-quokka-5a905d.netlify.app/" . urlencode(get_site_url() . "/og-image?pid=" . get_the_id()) . "/opengraph"; ?>
<meta property="og:image" content="<?= $ogImage ?>" />
<meta name="twitter:image" content="<?= $ogImage ?>" />
</head> </head>
<body <?= body_class() ?>> <body <?= body_class() ?>>
<?php wp_body_open(); ?> <?php wp_body_open(); ?>

21
page-og-image.php Normal file
View File

@ -0,0 +1,21 @@
<?php get_header() ?>
<?php
$post = get_post($_GET["pid"]);
$author = get_the_author_meta('display_name', $post->post_author);
?>
<main class="bg-lightGrey max-w-screen">
<section class="wrapper-md h-screen h-[100dvh] flex flex-col justify-center items-center">
<ul class="basic-select w-full">
<li><h1 class="text-center"><?= $post->post_title ?></h1></li>
<li class="px-size-0 text-size-2"><time><?= date("d/m/Y, H:i A", strtotime($post->post_date_gmt)) ?></time></li>
<li class="px-size-0 text-size-2"><author>By <?= $author ?></author></li>
</ul>
<footer class="pt-size-2">
LewisDale.dev
</footer>
</section>
</main>
<?php get_footer() ?>

View File

@ -535,6 +535,11 @@ pre .comment {
padding: 0; padding: 0;
} }
.px-size-0 {
padding-left: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
padding-right: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
}
.py-size-0 { .py-size-0 {
padding-top: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem); padding-top: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
padding-bottom: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem); padding-bottom: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);